css怎么制作表格

使用HTML和CSS创建表格

HTML提供<table>标签用于创建表格结构，结合CSS可以自定义样式。以下是基本实现方法：

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 {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}

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

th {
  background-color: #f2f2f2;
}

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

高级样式技巧

斑马纹效果

tr:nth-child(odd) {
  background-color: white;
}
tr:nth-child(even) {
  background-color: #f5f5f5;
}

悬停高亮

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

固定表头

thead {
  position: sticky;
  top: 0;
}

响应式表格设计

对于移动端，可以通过媒体查询调整显示方式：

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

或改为堆叠布局：

@media screen and (max-width: 600px) {
  td {
    display: block;
    width: 100%;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

边框样式定制

双线边框

table {
  border: 3px double #333;
}
td {
  border: 1px solid #999;
}

圆角表格

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

表头样式增强

渐变背景

th {
  background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
}

阴影效果

thead {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}