表格边框

若要在 CSS 中指定表边框，请使用该属性。border

下面的示例为 <table>、<th> 和 <td> 元素指定实线边框：

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

全宽桌子

在某些情况下，上表可能看起来很小。如果需要应跨越整个屏幕（全宽）的表，请添加到 <表>元素：width: 100%

table {
  width: 100%;
}

折叠表格边框

border-collapse属性设置表格边框应折叠成单个边框：

table {
  border-collapse: collapse;
}

如果只想在表格周围显示边框，则只需指定 <border>：

table {
  border: 1px solid;
}

工作台宽度和高度

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

下面的示例将表格的宽度设置为100%，并将 <th>元素到70px：

table {
  width: 100%;
}

th {
  height: 70px;
}

要创建仅应跨越半页的表，请使用：width: 50%

table {
  width: 50%;
}

水平对齐

属性设置水平对齐方式（如左对齐、右对齐或居中对齐方式） <th> 或 <td> 中的内容。text-align

默认情况下，<th> 元素的内容居中对齐，并且 <td>元素的内容左对齐。

要将 <td> 元素的内容也居中对齐，请使用：text-align: center

td { text-align: center; }

要左对齐内容，请强制将<th>元素对齐 左对齐，属性为：text-align: left

th {
  text-align: left;
}

垂直对齐

该属性设置垂直对齐方式（如顶部、底部或中间） <th> 或 <td> 中的内容。vertical-align

默认情况下，表格中内容的垂直对齐方式为中间对齐方式（对于两个<th> 和<td>元素）。

下面的示例将 <td> 元素的垂直文本对齐方式设置为底部：

td {
  height: 50px;
  vertical-align: bottom;
}

表格填充

若要控制边框和表格中内容之间的间距，请使用<td> 和 <th> 元素的 padding属性 ：

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

水平分隔器

将属性border-bottom添加到水平分隔符的 <th> 和 <td>：

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

可悬停表

使用 <tr> 上的选择器:hover在鼠标上突出显示表格行 多：

tr:hover {background-color: coral;}

条带表格

对于斑马条纹表格，请使用选择器并向所有偶数（或奇数）表格行添加上nth-child() background-color

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

表颜色

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

th {
  background-color: #04AA6D;
  color: white;
}

响应式表

如果屏幕太高，响应式表格将显示水平滚动条 小以显示完整内容：

添加一个容器元素（如 <div>），并在 <table> 元素周围添加，以使其响应：overflow-x:auto

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

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

</div>