css表格制作表格

CSS 表格制作方法

基础表格结构

使用HTML的<table>标签创建表格框架，搭配<tr>（行）、<td>（单元格）和<th>（表头）标签：

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

边框样式

通过border属性设置边框，合并边框使用border-collapse：

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

隔行变色

使用:nth-child()伪类实现斑马纹效果：

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

悬停高亮

通过:hover伪类添加交互效果：

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

响应式表格

针对小屏幕设备添加横向滚动：

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

高级样式示例

合并单元格、固定表头等进阶效果：

/* 固定表头 */
thead {
  position: sticky;
  top: 0;
  background: white;
}

/* 单元格合并 */
td[colspan="2"] {
  text-align: center;
}

注意事项

• 使用语义化HTML结构确保可访问性
• 避免过度设计影响表格数据的可读性
• 移动端优先考虑滚动方案而非强制缩放