Bootstrap 表格

Bootstrap提供了一套清晰有效的创建表格的布局

基础标签

标签	描述
<table>	为表格添加基础样式
<thead>	表格标题行的容器元素(<tr>)，用来标识表格列
<tbody>	表格主体中的表格行的容器元素(<tr>)
<tr>	一组出现在单行上的表格单元格的容器元素(<td>和<th>)
<td>	默认的表格单元格
<th>	特殊的表格单元格，用来标识列或行(取决于范围和位置)。必须在<thead>中使用
<caption>	关于表格存储内容的描述或总结

示例：

<table class="table">
	<caption>基本布局示例</caption>
    <thead>
    	<tr>
            <th>标签</th>
            <th>描述</th>
      	</tr>
    </thead>
	<tbody>
		<tr>
			<td>&lt;table&gt;</td>
			<td>为表格添加基础样式</td>
		</tr>
		<tr>
			<td>&lt;thead&gt;</td>
			<td>表格标题行的容器元素...</td>
		</tr>
	</tbody>
</table>

不妨亲自试试？

源码

table{
	border-collapse: collapse
}

border-collapse 属性，设置表格的边框是否被合并为一个单一的边框，此处设置为合并

caption{
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom
}

caption 说明文字标签，caption-side设置其说明文字的位置，在Bootstrap默认预设中为底部

th{
	text-align: inherit;
	text-align: -webkit-match-parent
}

文本对齐样式继承父元素

.table下表格元素的样式

.table{
	width: 100%;
	margin-bottom: 1rem;
	color: #212529
}

.table类，设置整个表格宽度、底部外边距与字体颜色

.table td
.table th {
	padding: .75rem;
	vertical-align: top;
	border-top: 1px solid #dee2e6
}

设置.table类 内的 基本单元格和特殊单元格的样式。

通过增加内边距来使单元格撑开；调整垂直对齐方式为：把元素的顶端与行中最高的元素的顶端对齐；设置顶部边框起到单元行分行的效果。

.table thead th{
	vertical-align: bottom;
	border-bottom: 2px solid #dee2e6
}

与上一个样式不同，这个th样式，是作用于thead标签中的th，即，标题。

设置其垂直居中方式为：底部对齐；并且设置底部边框起到分行效果。

.table tbody+tbody{
	border-top: 2px solid #dee2e6
}

这里使用到了一个对我来说不怎么常见的选择器：element1 + element2

表示的是 紧随于 element1 后的元素 element2

这里选择的是 .table的后代元素中，紧随与一个tbody后的tbody

通过设置其顶部边框，来实现分行的效果

这些便是Bootstrap预设的有关表格标签的基础样式，当然还有诸多在不同尺寸下的样式，这里并不多加赘述。

表格类

Bootstrap除了提供了表格标签的预设样式，还提供了一些可用于表格的类样式。

类	描述
.table	为任意<table>添加基本样式(只有横向分割线)
.table-striped	在<tbody>内添加斑马线形式的条纹(IE8不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在<tbody>内的任一行启用鼠标悬停状态(即鼠标高亮)

.table-striped

用法：

<table class="table tabl-striped">
	<!-- 省略 -->
</table>

源码：

.table-striped tbody tr:nth-of-type(odd){
	background-color: rgba(0, 0, 0, .05)
}

在.table-striped类的后代 表格主体元素的 奇数行后代元素 的背景色进行修改

.table-bordered

用法：

<table class="table table-bordered">
	<!-- 省略 -->
</table>

源码：

.table-bordered {
	border: 1px solid #dee2e6
}

.table-bordered td,
.table-bordered th {
	border: 1px solid #dee2e6
}

.table-bordered thead td,
.table-bordered thead th {
	border-bottom-width: 2px
}

.table-hover

用法：

<table class="table table-hover">
	<!-- 省略 -->
</table>

源码：

.table-hover tbody tr:hover {
	color: #212529;
	background-color: rgba(0, 0, 0, .075)
}
.table-hover .table-primary:hover {
	background-color: #9fcdff
}

.table-hover .table-primary:hover>td,
.table-hover .table-primary:hover>th {
	background-color: #9fcdff
}
.table-hover .table-secondary:hover {
	background-color: #c8cbcf
}

.table-hover .table-secondary:hover>td,
.table-hover .table-secondary:hover>th {
	background-color: #c8cbcf
}
/* 省略 */

给.table-hover的后代元素的hover伪元素绑定背景色样式

可用于 <tr> <th> <td>标签 的类

类	描述
.table-active	将悬停的颜色应用在行或者单元格上
.table-success	表示成功的操作
.table-info	表示信息变化的操作
.table-warning	表示一个警告的操作
.table-danger	表示一个危险的操作

源码：

.table-active,
.table-active>td,
.table-active>th {
	background-color: rgba(0, 0, 0, .075)
}
/* 全部都是修改背景色 */

提示

Bootstrap4与Bootstrap3在类名上有较大的差异