二维码

HTML 表格边框

HTML 表格边框

HTML 表格可以具有不同样式和形状的边框。

如何添加边框

若要添加边框,请在 、 和 元素上使用 CSS 属性:border``table``th``td

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

折叠的表格边框

若要避免像上面示例中那样使用双边框,请将 CSS 属性设置为 。border-collapse``collapse

这将使边框折叠成一个边框:

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

样式表边框

如果设置每个单元格的背景颜色, 并赋予边框白色(与文档背景相同), 你得到一个看不见的边框的印象:

1
2
3
4
5
6
7
table, th, td {
border: 1px solid white;
  border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

圆桌会议边框

使用该属性,边框将变圆角:border-radius

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

跳过表格周围的边框,从 css 选择器中省略:table

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

虚线表边框

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

允许使用以下值:

  • dotted 

  • dashed 

  • solid   

  • double 

  • groove 

  • ridge   

  • inset   

  • outset 

  • none

  • hidden

1
2
3
th, td {
border-style: dotted;
}

边框颜色

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

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