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: 1px solid #ddd;
  border-collapse: collapse; /* 合并相邻边框 */
}
td, th {
  border: 1px solid #ccc;
  padding: 8px; /* 单元格内边距 */
}

表格宽度与对齐

控制表格宽度和内容对齐方式：

table {
  width: 100%; /* 或固定宽度如500px */
  text-align: left; /* 内容左对齐 */
}
th {
  text-align: center; /* 表头居中 */
}

斑马纹效果

使用:nth-child()伪类实现交替行颜色：

tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #e6e6e6; /* 悬停效果 */
}

响应式表格

添加水平滚动条适应小屏幕：

div.table-container {
  overflow-x: auto;
}
@media screen and (max-width: 600px) {
  table { font-size: 14px; }
}

高级样式示例

合并单元格与固定表头：

/* 合并单元格 */
td[rowspan="2"] {
  vertical-align: middle;
}
/* 固定表头 */
thead th {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
}

注意事项

• 避免使用过深的边框颜色影响可读性
• 确保单元格内边距足够（建议8-10px）
• 复杂表格建议使用<colgroup>分组设置列样式
• 打印样式需单独设置@media print规则