肉渣教程

CSS 表格

上一节 下一节

表格边框 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;
}

运行一下

设置表格的宽度和高度

通过设置表格或单元格的widthheight属性即可。看下例,将表格的整体宽度设置成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>

运行一下


CSS 表格

上一节 下一节