BootStrap表格详解

最新推荐文章于 2024-05-21 16:45:41 发布

戴竹蜻蜓穿过森林_

最新推荐文章于 2024-05-21 16:45:41 发布

阅读量3.1k

点赞数

分类专栏： BootStrap学习笔记前端学习笔记文章标签： bootstrap html css

本文链接：https://blog.csdn.net/july_29/article/details/120714359

版权

前端学习笔记同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

BootStrap学习笔记

4 篇文章 0 订阅

订阅专栏

表格

html：

表格标签用table标签表示，每一行由<tr>表示。表格是由行组成，行由列组成,列由<td>单元格组成。

 <table> 
     <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
 </table>

Bootstrap提供了.table类，会对每个td增加padding，相邻之间的td也会有一些间隔，并且增加了水平方向的分割线。

<table class="table">

如果需要加上边框，我们可以再加上.table-bordered类

<table class="table table-bordered">

斑马条纹样式，就是隔行变色效果，使用.table-striped类，这个类不被IE8兼容。

<table class="table .table-striped">

原生js实现这个效果：

<style>
        *{
            padding: 0;
            margin: 0;
           text-align: center;
        }
      .box{
          width: 500px;
          height: 500px;

          position: relative;
          margin: 0 auto;
      }
      .tb{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
      table{
          /* 边框合并collapse，separate默认不合并 */
           border-collapse: collapse; 
          border-spacing: 0;
            border: 1px solid black;
            width: 500px; 
      }
      th,td{
          border:1px solid #d0d0d0;
          padding: 10px;
          color: #404040;
      }
      th{
          background-color: #09c;
      }
      tbody tr{
          background-color: #f0f0f0;
      }
      .current{
          background-color: red !important;
      }
    </style>
</head>
<body>
    <div class="box">
 <table class="tb"> 
     <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>课程</th>
            <th>成绩</th>
        </tr>
     </thead>
     <tbody id="target">
     <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
 </table>
</div>
</body>
<script>
    const tbody = document.getElementById('target');
    const trArr = tbody.children;
    for(let i=0;i<trArr.length;i++){
        if(i%2 !==0){
            trArr[i].style.backgroundColor = "red";
        }else{
            trArr[i].style.backgroundColor = ""
        }
    }
</script>

在js中先获取tbody以及子元素tr，再用for循环结合if判断，实现了隔行换色。

鼠标悬停在<tbody>每一列做出响应，使用.table-hover类

<table class="table table-hover">

原生js实现：

跟着上面的那个写：

定义一个myColor来存放之前的颜色，悬停后换颜色，移开后重新把myColor赋值回去

<script>
    const tbody = document.getElementById('target');
    const trArr = tbody.children;
    for(let i=0;i<trArr.length;i++){
        if(i%2 !==0){
            trArr[i].style.backgroundColor = "red";
        }else{
            trArr[i].style.backgroundColor = "blue"
        }
   

    var myColor ="";
        trArr[i].onmouseover = function () {
            myColor = this.style.backgroundColor;
            this.style.backgroundColor = "#fff";
        }
      trArr[i].onmouseout = function () {
        this.style.backgroundColor = myColor;
      }
    
     }
</script>

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

给每一行换颜色，我们可以给tr加类名，可用属性为：

.active 灰色

.success 绿色

.info蓝色

.warning黄色

.danger红色

具体使用为：<tr class="danger">

值得一说的是，BootStrap把这些颜色全部都是淡化处理，就不会那么的鲜亮。

7.创建响应式表格，把.table类放在.table-responsive类里面，当屏幕缩小时会有水平的滚动条出现（小于768px）。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

戴竹蜻蜓穿过森林_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
BootStrap表格详解

表格html：表格标签用table标签表示，每一行由<tr>表示。表格是由行组成，行由列组成,列由<td>单元格组成。 <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr>
复制链接

扫一扫