CSS表格



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

公司 联系人 国家
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

表格边框

在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;
}

让我试试


表格的宽和高

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

下面的示例将表的宽度设置为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 表格属性

属性 描述
border 在一个声明中设置所有边框属性
border-collapse 指定是否应折叠表边框.
border-spacing 指定相邻单元格边界之间的距离
caption-side 指定表标题的位置
empty-cells 指定是否在表中的空单元格上显示边框和背景
table-layout 设置用于表的布局算法.