table css 边框

作者：蛋蛋的憂傷发布日期:2026-07-11 浏览:72

/* 示例代码：使用 CSS 设置表格边框 */

table {
  border-collapse: collapse; /* 合并表格边框，使边框看起来更整洁 */
  width: 100%; /* 表格宽度为父元素的100% */
}

table, th, td {
  border: 1px solid black; /* 设置表格、表头和单元格的边框为1像素宽的实线黑色边框 */
}

th, td {
  padding: 8px; /* 为表头和单元格内容添加内边距，使内容与边框之间有一定的间距 */
  text-align: left; /* 文本左对齐 */
}

解释说明：

border-collapse: collapse;：将表格的边框合并为一个单一的边框，避免双线边框的情况。
border: 1px solid black;：为表格、表头 (th) 和单元格 (td) 添加1像素宽的黑色实线边框。
padding: 8px;：为表头和单元格的内容添加8像素的内边距，使内容与边框之间有一定的间距，提升可读性。
text-align: left;：设置表头和单元格中的文本左对齐。

上一篇：css文本属性有哪些

下一篇：css文字添加下划线