css代码制作表格

基础表格结构

使用HTML的<table>标签配合CSS可以创建基础表格。以下是一个简单示例：

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

边框样式

通过border属性添加表格边框：

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

斑马纹效果

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

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

悬停高亮

为表格行添加悬停效果：

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

响应式表格

在小屏幕设备上添加横向滚动：

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

表头固定

实现滚动时表头固定的效果：

thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}

高级样式示例

结合阴影和圆角的现代风格表格：

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
}
th {
  background-color: #4CAF50;
  color: white;
}

这些代码片段可根据实际需求组合使用或单独调整，注意浏览器兼容性测试。