制作css表格

CSS表格制作方法

使用CSS创建表格可以通过原生HTML表格标签结合CSS样式，或采用纯CSS的display: table属性实现。

HTML表格基础结构

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

基础CSS样式

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

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

纯CSS表格方案

通过display属性模拟表格行为：

<div class="css-table">
  <div class="css-thead">
    <div class="css-tr">
      <div class="css-th">标题</div>
    </div>
  </div>
  <div class="css-tbody">
    <div class="css-tr">
      <div class="css-td">内容</div>
    </div>
  </div>
</div>

对应CSS：

.css-table {
  display: table;
  width: 100%;
}

.css-thead {
  display: table-header-group;
}

.css-tbody {
  display: table-row-group;
}

.css-tr {
  display: table-row;
}

.css-th, .css-td {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
}

响应式表格处理

对于移动端适配，可添加水平滚动：

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

高级样式技巧

斑马条纹效果：

tbody tr:nth-child(odd) {
  background-color: rgba(0,0,0,0.05);
}

悬停高亮：

tr:hover {
  background-color: rgba(0,0,0,0.1);
}

边框样式优化：

table {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}