Bootstrap表格的CSS布局

Posted Wendy-lxq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap表格的CSS布局相关的知识，希望对你有一定的参考价值。

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

补充：

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

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

1、基础样式

     基础样式只需要在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像素宽的横线
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 个子元素，与类型无关。

3、带边框的表格

     在基础样式下，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;
4、紧凑型表格

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

<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;
5、响应式表格

     随着响应式设计的大量需求，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;


以上是关于Bootstrap表格的CSS布局的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap表格的CSS布局

为啥 Bootstrap 网格布局优于 HTML 表格？

css实现水平垂直居中的七种方式

如何用css去除表格内、外边距和边框

bootstrap4框架使用总结

CSS盒子模型