HTML 表格边框

如何添加边框

要添加边框，请在 table、th 和 td 元素上使用 CSS border 属性：

实例

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

亲自试一试

合并表格边框

为了避免出现如上例所示的双重边框，将 CSS border-collapse 属性设置为 collapse。

这将使边框合并为单一边框：

实例

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

亲自试一试

样式化表格边框

如果您为每个单元格设置背景颜色，并将边框颜色设置为白色（与文档背景相同），就会产生无边框的视觉效果：

实例

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

th, td {
  background-color: #96D4D4;
}

亲自试一试

圆角表格边框

使用 border-radius 属性，边框会变成圆角：

实例

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

亲自试一试

通过从 CSS 选择器中省略 table，可以跳过表格周围的边框：

实例

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

亲自试一试

虚线表格边框

使用 border-style 属性，您可以设置边框的外观。

允许的值包括：

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

实例

th, td {
  border-style: dotted;
}

亲自试一试

边框颜色

使用 border-color 属性，您可以设置边框的颜色。

实例

th, td {
  border-color: #96D4D4;
}

亲自试一试