CSS表格

一个HTML表格可以通过CSS大大提高它的外观显示:

表格边框

在CSS指定表的边框，利用边框属性.

下面的例子指定了一个黑色边框，为 <table>, <th>, 和 <td> 元素:

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

让我试试

注意，上面示例中的表具有双边框. 这是因为两个table和<tr>和<td>元素有独立的边框.

折叠表格边框

border-collapse 属性设置表边框是否应折叠成单个边框:

table {
    border-collapse: collapse;
}

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

让我试试

如果你只想要一个边界在表格周围, 仅指定 <table>元素的 border 属性即可:

table {
    border: 1px solid black;
}

让我试试

表格的宽和高

表的宽度和高度由width和height属性定义.

下面的示例将表的宽度设置为100%, 并且设置<th> 元素设置为50px:

table {
    width: 100%;
}

th {
    height: 50px;
}

让我试试

水平对齐

text-align 属性设置<th> 或者<td>的内容水平对齐方式(像 left, right, 或者 center).

默认,<th>元素内容的对齐方式的居中 <td> 元素的对齐方式是左对齐.

下面的实例 设置<th>元素内容的对齐方式是左对齐:

th {
    text-align: left;
}

让我试试

垂直对齐

vertical-align 属性设置<th>或者 <td> 的内容垂直对齐方式(像 top, bottom ， middle)

默认情况下，表中内容的垂直对齐居中. (针对 <th> 和 <td> 元素).

下面的示例为<td> 元素设置文字垂直对齐为底部对齐

th {
    text-align: left;
}

让我试试

表格的填充

在表格中控制边框和内容之间的空间, 使用 <td> 和 <th>元素的padding属性:

th, td {
    padding: 15px;
    text-align: left;
}

让我试试

水平分割线

添加 border-bottom 属性到 <th> 和 <td> 实现水平分隔:

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

让我试试

鼠标经过表格

使用 :hover 选择器 在<tr>元素上，可以实现当鼠标经过时的高亮显示:

tr:hover {background-color: #f5f5f5}

让我试试

条纹表格

斑马条纹的表格，用nth- child()选择器和所有添加背景颜色甚至（或奇数）表行：

tr:nth-child(even) {background-color: #f2f2f2}

让我试试

表格颜色

下面的示例指定<th>元素的背景颜色和文本颜色：

tr:hover {background-color: #f5f5f5}

让我试试

响应式表格

如果屏幕太小，无法显示完整内容，则响应表将显示水平滚动条:

添加一个容器元素(像 <div>) 使用 overflow-x:auto 围绕 <table> 元素可以实现表格响应式:

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

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

</div>

让我试试

CSS 表格属性