css制作表格

使用HTML和CSS创建表格

HTML中的<table>元素用于创建表格，结合CSS可以调整样式。以下是一个基础示例：

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

基础CSS样式

通过CSS可以修改表格边框、间距和颜色：

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

添加悬停效果

为表格行添加悬停高亮：

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

斑马纹表格

交替行颜色增强可读性：

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

响应式表格

在小屏幕设备上添加水平滚动：

.table-container {
  overflow-x: auto;
}

高级样式示例

圆角边框和阴影效果：

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

固定表头

长表格固定表头：

thead {
  position: sticky;
  top: 0;
}

这些方法可以根据实际需求组合使用，创建功能完善且美观的表格。