本篇文章带大家一起了解一下bootstrap中的表格插件的用法，介绍一下表格的颜色、表格的结构、响应式表格、表格边框等，希望对大家有所帮助！
1 强大的Bootstrap的表格
在html标签
加上基本类别 .table就可以使用Bootstrap的表格可选修饰类别或是自定义样式进行扩展。【相关推荐：《bootstrap》】
所有表格样式在Bootstrap中都不会继承，意味着嵌套表格的样式都是独立于父表格。
以下是使用最基本的表格排版在Bootstrap中的外观。
nbsp;html>表格演示 表格演示
序号 姓名 性别 职业 1 张三 男 程序员 2 李四 女 美工 3 王五 我只会耍大刀
登录后复制
可以看到，默认的简单表格只是在table标签加了个class=”table”，就和普通的html表格外观上有了很大改观。
2 表格的颜色
使用语意化class给表格列或单元格上色。表哥颜色可以分别设置在
、、
、 、等一切表格元素中。如果是加在表格中，则在整个表格中有效，加在行中对整行有效，加在单元格中对整个单元格有效。
到目前为止好像没法加在整列中，要对整列使用某个颜色，只能将其中的所有单元格设置颜色。
nbsp;html>表格演示
Default table-primary table-secondary table-success table-danger table-warning table-info table-light table-dark table-success
登录后复制
通过这个例子大家可以基本明白表格颜色的用法，需要主要的是对整个表格运用颜色是用
，不要省略前面的table，虽然例子中最后一行也是table-success，但是事实上，最后一行是设置在单元格上的。
3 表格的结构-表头、表尾、标题
nbsp;html>表格演示
人员登记表
序号 姓名 性别 职业 1 张三 男 警察 2 李四 女 护士 3 王五 男 教师 序号 姓名 性别 职业
登录后复制
显示效果
从上面的例子可以看出表格由下面几部分组成：
表头thead：t是表格的简写head是头部表尾tfoot：t是表格foot是底部标题caption：只有一行，默认在表尾底部，演示中我通过在table中添加caption-top使他在上部。默认标题靠左对齐，我通过在caption中添加class=”text-center”使文字居中。默认字体较小，我通过h3标题使他变大。行tr：一行，td标签必须写在tr中。列td：一个单元格，通过可以使两个相邻的单元格合并，里面的数字可以更改，但不能大于行中所有的列数。表头列th：与td唯一区别是里面文字粗体显示
通常为了美观，一般使用
或 使 显示为浅灰色或深灰色，其用法与11.2.1中的行的颜色一样，另外一般情况下表尾很少使用。
4 响应式表格
当表格一行的内容超过浏览器宽度的时候，默认浏览器会出现滚动条，这样存在的一个问题就是会把页面无线拉伸，严重影响网页中其他页面元素的显示效果。
而响应式表格是指把表格放在一个
标签中，而该div标签是响应的，与容器同宽度，当表格宽度大于该div标签的时候，该div容器就会出现滚动条，而不是在浏览器上，这样就保证了表格不会超出页面宽度。
nbsp;html>表格演示 td{white-space:nowrap;}
表头1 表头2 表头3 表头4 表头5 表头6 表头7 表头8 表头9 表头10 我是第1个单元格 我是第2个单元格 我是第3个单元格 我是第4个单元格 我是第5个单元格 我是第6个单元格 我是第7个单元格 我是第8个单元格 我是第9个单元格 我是第10个单元格
登录后复制
该代码的css部分是为了禁止文字换行，否则单元格会挤压成很多行。
在特点断点处响应
table-responsive{-sm|-md|-lg|-xl|-xxl}表示在断点前会出现滚动条，从该断点开始，表格将正常运行并且不会水平滚动。你可以把上面的代码中table-responsive换为table-responsive-md 查看一下效果，在此我就不演示了。
5 表格边框
默认表格是只有行边框的，你可以用table-bordered 为表格和单元格的所有边添加边框，还可以用可以添加边框颜色实用类来更改边框颜色（边框颜色通表格颜色，只不过把前缀table换成border）。
登录后复制登录后复制…
你还可以table-borderless构造无框的表格。
登录后复制登录后复制…
现在给出一个综合实例。
nbsp;html>表格演示
带颜色边框表格
序号 姓名 性别 职业 1 张三 男 警察 2 李四 女 护士 3 王五 男 教师
无边框表格
序号 姓名 性别 职业 1 张三 男 警察 2 李四 女 护士 3 王五 男 教师
登录后复制
6 紧凑表格（小表格）
添加table-sm将所有单元格填充减半，使任何table更加紧凑。
登录后复制
下面第二个是紧凑表格，仔细看是不是比第一个没使用table-sm那个行高度要小。
7 垂直对齐
的表格单元格始终垂直对齐到底部。中的表单元格继承对齐方式，默认情况下将其对齐到顶部。在需要时可以使用垂直对齐类重新对齐。
垂直对齐类有两种修饰符：
vertical-align: middle;居中对齐vertical-align: bottom; 对齐到底部
垂直对齐修饰符可以写到表格，可以写到行，也可以写到单元格，写到哪里就作用于哪里。还可以用到p、div等其它标签。
nbsp;html>列的排序 th{white-space:nowrap;}
| 序号 | 姓名 | 简介 |
|---|---|---|
| 1 | 李白 | 李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。 |
| 序号 | 姓名 | 简介 |
|---|---|---|
| 1 | 李白 | 李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。 |
| 2 | 杜甫 | 杜甫（712年—770年），字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。 |
| 3 | 白居易 | 白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍山西太原。是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。 |
