Bootstrap CSS表格

1.首先介绍一下CSS代码的显示：

(1)<code>元素显示单行内联代码。设置背景颜色和内部文本颜色。

(2)<pre>元素新生多行代码块。显示大块的代码段，并保持原有格式不变。

(3)<kbd>元素显示用户输入代码。

2.表格

在表格组件里，Bootstrap提供了一种基础的table样式，4种附加样式(table-sstriped、

table-bordered、table-hover、table-condensed)以及一个支持响应式布局的table-responsive

容器样式。注意：每种附加样式都是在table样式的基础上联合应用才生效的。

(1).基础样式：table

只要在table元素上应用table样式就可以制作出漂亮的表格。

可以参照图2和图3来进行对比：

图2(未应用table样式)

图3(应用table样式)

图3所对应的代码3为：

代码3：

<table class="table">/*图2和图3的区别在于table样式的应用与否*/
<tr><td>#</td><td>图书名称</td><td>出版社</td><td>作译者</td></tr>
<tr>
<td>1</td>
<td>javascript编程精解</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>2</td>
<td>javascript设计模式</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>3</td>
<td>javascript启示录</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>4</td>
<td>深入理解Bootstrap</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
</table>

table样式的主要作用有3个：

增加单元格的内边距；

在thead的底部设置一条2像素的粗线；

在每行记录的顶部都有一条1px的细线。

(2).带背景条纹的表格：

在现有的table样式的基础上再应用一个table-striped的样式，就设置了隔行加背景色。

例如：在代码3的基础上添加该样式就可以得到图4及其对应的代码4：

图4

代码4：

<table class="table table-striped">
<tr><td>#</td><td>图书名称</td><td>出版社</td><td>作译者</td></tr>
<tr>
<td>1</td>
<td>javascript编程精解</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>2</td>
<td>javascript设计模式</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>3</td>
<td>javascript启示录</td>
<td>人民邮电出版社</td>
<td>汤姆大叔(译)</td>
</tr>
<tr>
<td>4</td>
<td>深入理解Bootstrap</td>
<td>机械工业出版社</td>
<td>汤姆大叔(译)</td>
</tr>
</table>

(3).带边框的表格

在table样式的基础上添加样式table-bordered，就可以实现为表格添加边框的效果；

例5：为表格添加边框效果

图5

代码5：相对于代码4只改了一处，

将代码4中第一行：<table class="table table-striped">

改为代码5的第一行：<table class="table table-bordered">

(4).鼠标悬停高亮表格

table-hover样式：当鼠标移动到其上方时会变换颜色。用法参见代码4和代码5.

(5).紧凑型表格

紧凑型表格指的是表格的显示比普通表格稍微紧凑一些，即是减小了单元格的内边距。

样式为：table-condensed

具体用法可以参见代码4和代码5。

3.行级元素样式

Bootstrap为表格的tr元素提供了5中额外的样式，用于控制tr的背景颜色。

tr的行级元素样式：

(1).active：表示当前活动的信息；

(2).success：表示成功或者正确的行为；

(3).info：表示中立的信息或行为；

(4).warning：表示警告，需要特别注意；

(5).danger：表示危险或者可能是错误的行为；

可以对代码3的5行分别设置行的颜色，最终的显示效果如图6：

图6

4.响应式表格

Bootstrap为表格提供了一个响应式设计的容器(table-responsive)，将table-responsive样式包装在

table样式外部即可创建响应式表格，其会在小屏幕设备(<768px)上滚动；当屏幕大于768px时，水

平滚动条消失。具体可见下方的图7和图8：

图7(当屏幕宽度小于768px时)

图8(当屏幕宽度大于768px时)