表格边框 Table Borders

如CSS边框所述，表格元素也适用border属性。

如下例，设置table、th、td元素的边框（因为这三个元素都设置了边框，所以看上去表格呈现双线边框）：

table, th, td {
    border: 1px solid black;
}

运行一下

为了更好看出上述例子的内在关系，将三类元素分开设置：

table {
    border: 1px solid black;
}

th {
    border: 1px solid Tomato;
}

td {
    border: 1px solid #46acb6;
}

运行一下

合并表格边框

明明设置的是单线，最终却呈现出双线，有点事与愿违的感觉；为了解决这个问题，可以将table元素的border-collapse属性设置成collapse就ok啦。

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

运行一下

只设置表格外边框

如果想只设置表格外边框，而不设置内部单元格边框，直接仅设置table元素即可：

table {
    border: 1px solid black;
}

运行一下

设置表格的宽度和高度

通过设置表格或单元格的width和height属性即可。看下例，将表格的整体宽度设置成100%宽，表头的单元格高度则设置成72px高。

table {
    width: 100%;
}

th {
    height: 72px;
}

运行一下

水平对齐

CSS中的text-align属性可以设置表头或者普通单元格的内容在水平方向上的对齐方式。其中表头（th元素）内容默认情况下是居中，而普通单元格（td元素）的内容默认是左对齐。

th {
    text-align: left;
}

运行一下

垂直对齐

CSS中的vertical-align属性可以设置表头或者普通单元格的内容在竖直方向上的对齐方式（top/midddle/bottom）；默认情况下，表头和普通单元格在垂直方向上都默认取值居中。

th, td {
    height: 72px;
    vertical-align: bottom;
}

运行一下

表格内边距 Padding

设置一下表格的内边距padding属性，看起来会更加清爽一些：

th, td {
    padding: 16px;
}

运行一下

只设置横线进行分割

如下所示，试一试呗：

th, td {
    border-bottom: 1px solid #46acb6;
}

运行一下

通过伪类设置单元格hover状态的样式

当单元格被鼠标悬浮，即出发该单元格hover状态下的样式设置；如下例所示，利用:hover伪类选择器来设置tr元素（行元素）hover状态下的CSS样式。

tr:hover {
    background-color: #eef8f8;
}

运行一下

利用奇偶伪类实现条纹形表格

伪类:nth-child()选择器可以区分奇数行与偶数行；tr:nth-child(even)代表偶数行，tr:nth-child(odd)代表奇数行。

/* 奇数行 odd */
tr:nth-child(odd) {
    font-style: italic;
}

/* 偶数行 even */
tr:nth-child(even) {
    background-color: #eef8f8;
}

运行一下

表格色彩 Color

CSS中的color属性和background-color属性也适用于表格元素。以设置表头th元素的相关色彩为例：

th {
    background-color: #46acb6;
    color: White;
}

运行一下

表格太大了怎么办？

如果显示的空间有限，表格太大了，这该如何处理呢？很简单，在表格table元素外添加一个容器元素（比如div元素即可），然后把外部容器元素设置上overflow-x:auto这个属性与取值，这样就可以通过滚动条去查看超出范围的表格内容，这种实践方法是一个不错的解决方案。

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

运行一下