【Bootstrap】表格的CSS布局

时间  2019-12-06 标签 Bootstrap 表格 css 布局

      表格在开发中常常会用到，尤为是在展现数据的时候，一个美观的表格设计很是重要。Bootstrap提供了表格组件，其中包括1种基础.table样式，4种附加样式（.table-striped，.table-bordered，.table-hover，.table-condensed）以及一个支持响应式布局的.table-responsive容器样式。须要注意的是每种样式都是在.table样式的基础上联合应用才有效。css

补充：html

       为了让大表格(table)在下载的时候能够分段的显示,就是说在浏览器解析HTML时，table是做为一个总体解释的，使用TBODY能够优化显示。若是表格很长，用tbody分段，能够一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。
      tbody、tfoot、thead通常来讲用得不是不少，对于比较复杂的页面，页面的排版用到了不少的表格，表格的结构也就相对的复杂了，因此又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。
css3

  • thead　表格的头        用来放标题之类的东西
  • tbody　表格的身体    放数据本体 
  • tfoot　 表格的脚       放表格的脚注之类
     tbody包含行的内容下载完优先显示，没必要等待表格结束.另外，还须要注意一个地方。表格行原本是从上向下显示的。可是，应用了thead/tbody/tfoot之后，就“从头到脚”显示，无论你的行代码顺序如何。也就是说若是thead写在了tbody的后面，html显示时，仍是以先thead后tbody显示。

一、基础样式bootstrap

     基础样式只须要在table元素上加上类名.table便可制做出比较漂亮的表格。示例以下：浏览器

<table class="table">
……
</table>
     这里写一个简单的例子： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet">
    <title>Table</title>
</head>
<body>
<table class="table">
    <tbody>
        <tr>
            <th>姓名</th>
            <th>毕业学校</th>
            <th>联系方式</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            <td>王五</td>
            <td>陈六</td>
        </tr>
        <tr>
            <td>清华大学</td>
            <td>北京大学</td>
            <td>浙江大学</td>
            <td>厦门大学</td>
        </tr>
        <tr>
            <td>13122222222</td>
            <td>13233333333</td>
            <td>15644444444</td>
            <td>17866666666</td>
        </tr>
        <tr>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
        </tr>
    </tbody>

</table>
</body>
</html>
     运行效果以下：                               


        .table样式的主要做用有3个：增长单元格的内边距，在thead的底部设置一条2像素的粗线，以及每行记录的顶部都有一条一个1像素的细线。主要源码以下：布局

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;  //设置单元格内边距
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;  //每条记录的顶部都有一条1像素的细线
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd; //thead有1条2像素宽的横线
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;  //若是表格有2个tbody，二者指间会有1条2像素宽的横线
}
二、带背景条纹的表格

      在.table的基础上，经过 .table-striped 类能够给 <tbody> 以内的每一行增长斑马条纹样式。使用方法以下：优化

<table class="table table-striped">
  ...
</table>
     这里写一个简单的例子： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet">
    <title>Table</title>
</head>
<body>
<table class="table table-striped">
    <tbody>
        <tr>
            <th>姓名</th>
            <th>毕业学校</th>
            <th>联系方式</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            <td>王五</td>
            <td>陈六</td>
        </tr>
        <tr>
            <td>清华大学</td>
            <td>北京大学</td>
            <td>浙江大学</td>
            <td>厦门大学</td>
        </tr>
        <tr>
            <td>13122222222</td>
            <td>13233333333</td>
            <td>15644444444</td>
            <td>17866666666</td>
        </tr>
        <tr>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
        </tr>
    </tbody>

</table>
</body>
</html>
        运行效果以下：
       隔行换色的原理是利用了css3中的:nth-of-type选择器来实现的，不支持IE8及如下版本。源码以下： 
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
补充：
  • :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每一个元素。n 能够是数字、关键词或公式。
  • :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。

三、带边框的表格spa

     在基础样式下，Bootstrap为表格全部的单元格提供了1条1像素的边框。使用方式以下：设计

<table class="table table-bordered">
  ...
</table>
     这里写一个简单的例子： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet">
    <title>Table</title>
</head>
<body>
<table class="table table-bordered">
    <tbody>
        <tr>
            <th>姓名</th>
            <th>毕业学校</th>
            <th>联系方式</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            <td>王五</td>
            <td>陈六</td>
        </tr>
        <tr>
            <td>清华大学</td>
            <td>北京大学</td>
            <td>浙江大学</td>
            <td>厦门大学</td>
        </tr>
        <tr>
            <td>13122222222</td>
            <td>13233333333</td>
            <td>15644444444</td>
            <td>17866666666</td>
        </tr>
        <tr>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
        </tr>
    </tbody>

</table>
</body>
</html>
     运行效果以下：
      实现源码以下： 

.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
四、紧凑型表格

      所谓紧凑型表格其实就是表格的显示比普通的表格稍微紧凑一点，实现的原理就是减小单元格的内边距，使用方法以下：code

<table class="table table-condensed">
  ...
</table>
    在基础样式上的显示效果以下：

  

    默认状况下表格的padding是8像素，紧凑型的表格的padding是5像素。源码以下：

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
五、响应式表格

     随着响应式设计的大量需求，Bootstrap为表格也提供了一个响应式设计的容器（.table-responsive样式），在table的基础上，添加这个table-responsive便可建立响应式表格，其会在小屏幕设备上（小于768px）水平滚动，而当屏幕大于768px时，水平滚动条消失。示例以下:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
      实例代码以下: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet">
    <title>Table</title>
</head>
<body>
<div class="table-responsive">
    <table class="table table-condensed ">
        <tbody>
        <tr>
            <th>姓名</th>
            <th>毕业学校</th>
            <th>联系方式</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            <td>王五</td>
            <td>陈六</td>
        </tr>
        <tr>
            <td>清华大学</td>
            <td>北京大学</td>
            <td>浙江大学</td>
            <td>厦门大学</td>
        </tr>
        <tr>
            <td>13122222222</td>
            <td>13233333333</td>
            <td>15644444444</td>
            <td>17866666666</td>
        </tr>
        <tr>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
        </tr>
        </tbody>

    </table>
</div>

</body>
</html>
       运行效果以下：


       响应式表格的实现原理是利用了CSS的媒体查询特性，小于768px的设备上应用本身设计的样式，该样式主要有3个方面的设置：

      1）对.table-responsive容器边框以及滚动条进行了设置；

      2）把原有.table样式的底部外边距margin-bottom从20px变成了0px，其目的是消除滚动条带来的上下高度差，并在.table-responsive样式上设置了一个margin-bottom:15px;以免和容器外部的下一个元素重叠；

      3）将全部单元格的文本设置成不自动换行，以保留原有样式。

      源码以下：

@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;  //设置底部外边边框，避免重叠
    overflow-y: hidden;   //能将超出表格底部和顶部的内容截断
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;  //确保单元格中的文本不会换行
  }
}
       经过上述代码，能够看到.table-responsive给本身加了一个1px的外边框，若是在.table上再使用.table-bordered样式的话，就会和表格的外边框重合，变粗，因此Bootstrap对此进行了处理： 
.table-responsive > .table-bordered {
    border: 0;//将整个表格的外边框设置为0
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
联系我们 沪ICP备13005482号-10