css 制作表格模板

基础表格结构

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

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

边框样式

通过border-collapse控制边框合并，避免双边框效果：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

表头高亮

使用背景色和文字加粗突出表头：

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

斑马纹效果

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

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

悬停效果

增加交互反馈，鼠标悬停时高亮当前行：

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

响应式表格

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

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

固定表头

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

th {
  position: sticky;
  top: 0;
}

单元格对齐

根据数据类型调整内容对齐方式：

/* 数字右对齐 */
td.number {
  text-align: right;
}
/* 文本居中 */
td.text {
  text-align: center;
}

紧凑型表格

减少内边距实现紧凑布局：

.compact-table td, 
.compact-table th {
  padding: 4px 8px;
}

高级样式示例

结合阴影和圆角创建卡片式表格：

.table-card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}