二维码
搜索 ×

HTML 表格边框

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

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

推荐教程