css怎么制作表格

使用HTML和CSS制作表格

在HTML中，表格由<table>标签定义，结合CSS可以灵活控制样式。

基本HTML结构：

<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%;
  margin: 20px 0;
}

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

th {
  background-color: #f2f2f2;
}

添加悬停效果

增强交互体验的悬停效果：

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

斑马纹表格

使用:nth-child()选择器创建交替行颜色：

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

响应式表格

针对小屏幕设备的响应式处理：

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table thead {
    display: none;
  }

  table tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }

  table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }

  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级样式示例

创建更美观的表格样式：

table {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

th {
  background-color: #4CAF50;
  color: white;
}

td {
  transition: all 0.3s;
}

表格布局控制

使用table-layout属性控制表格布局：

table {
  table-layout: fixed; /* 固定布局 */
  /* 或 auto; 自动布局 */
}

单元格合并

通过HTML属性实现单元格合并：

<td colspan="2">跨两列</td>
<td rowspan="3">跨三行</td>

这些方法可以根据实际需求组合使用，创建各种风格的表格布局。