css table 网格线模板

CSS Table 网格线模板是一种可以帮助我们快速构建表格样式的技巧。本文将介绍如何使用 CSS 来实现网格线模板。

table {
  border-collapse: collapse;
}

td,th {
  padding: 0.5rem;
  border: 1px solid #ccc;
}

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

th {
  background-color: #ddd;
  font-weight: normal;
}

上面的 CSS 代码通过设置表格的 border-collapse 属性来去掉表格中相邻单元格之间的空隙，并为表格中的单元格和表头定义了 1 像素宽的实线边框。为了增加表格的可读性，我们使用 background-color 属性为表格中的奇数行添加了浅灰色背景，并对表头部分进行了特殊的样式设置。

使用 CSS Table 网格线模板可以让我们更加方便地创建表格样式，并使得表格更美观、易于阅读。