CSS 之 table 表格布局

在CSS中，可以使用多种方法来设计和布局表格。以下是一些常用的技巧和示例代码：

1. 基础表格样式：

table {
  width: 100%;
  border-collapse: collapse; /* 去掉单元格之间的距离 */
}
 
th, td {
  border: 1px solid #ddd; /* 设置单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: left; /* 设置文本对齐方式 */
}
 
th {
  background-color: #f2f2f2; /* 设置表头背景色 */
}

2. 隐藏表格边框：

table, th, td {
  border: none;
}

3. 设置表格单元格的背景色和文字颜色：

td {
  background-color: #f9f9f9;
  color: #333;
}

4. 使用伪类:hover添加鼠标悬停效果：

table tr:hover {
  background-color: #f5f5f5;
}

5. 设置表格的宽度和高度：

table {
  width: 500px; /* 设置表格宽度 */
}
 
th, td {
  height: 50px; /* 设置单元格高度 */
}

6. 隐藏某些单元格：

td.hidden {
  display: none;
}

7. 设置表格的文字大小：

table {
  font-size: 14px; /* 设置表格文字大小 */
}

这些是表格布局的基础技巧，可以根据具体需求进行扩展和调整。