【Bootstrap】表格的CSS布局

来源：互联网发布：青果教育网络管理系统编辑：程序博客网时间：2024/05/22 17:27

表格在开发中经常会用到，尤其是在展示数据的时候，一个美观的表格设计非常重要。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;  }

阅读全文

1 0