css 制作表格

基础表格结构

使用 <table>、<tr>、<th>、<td> 标签构建表格骨架：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

边框样式

通过 border 属性添加边框，合并边框使用 border-collapse：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}
th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
}

表头样式

为 <th> 设置背景色和文字样式：

th {
  background-color: #f2f2f2;
  text-align: left;
  font-weight: bold;
}

隔行变色

使用 nth-child 实现斑马纹效果：

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

悬停高亮

为行添加悬停效果：

tr:hover {
  background-color: #e6f7ff;
}

响应式表格

通过 overflow-x: auto 处理小屏幕下的滚动：

div.table-container {
  overflow-x: auto;
}

固定表头

结合 position: sticky 实现滚动时表头固定：

th {
  position: sticky;
  top: 0;
  z-index: 10;
}

边框圆角

为表格添加圆角（需配合 border-collapse: separate）：

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}