css表格制作表格

基础表格结构

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

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

边框样式

通过 border 属性添加边框：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

斑马纹效果

使用 nth-child 选择器实现交替行背景色：

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

悬停高亮

为行添加悬停效果：

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

响应式表格

通过媒体查询实现小屏幕横向滚动：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

固定表头

滚动时保持表头固定：

thead {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}

单元格合并

使用 colspan 和 rowspan 属性：

<td colspan="2">跨两列</td>
<td rowspan="3">跨三行</td>