CSS模板制作表格

使用CSS制作表格的方法

基本表格结构

HTML中表格由<table>标签定义，包含<tr>（行）、<th>（表头）和<td>（单元格）元素：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

基础样式设置

通过CSS控制边框、间距和对齐方式：

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

高级样式模板

1. 斑马条纹效果：

   

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

2. 悬停高亮：

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

3. 响应式表格：

   

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

边框样式变体

双线边框示例：

table {
  border: 3px double #333;
}
th, td {
  border: 1px solid #666;
}

圆角表格

table {
  border-radius: 8px;
  overflow: hidden;
}

固定表头

滚动时保持表头固定：

thead {
  position: sticky;
  top: 0;
}

阴影效果

table {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

单元格状态样式

td.highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

通过组合这些CSS属性，可以创建各种风格的表格模板，适应不同设计需求。实际应用时建议使用CSS预处理器（如Sass）维护样式变量。