只用css制作表格

使用CSS制作表格

在HTML中，表格通常使用<table>、<tr>、<td>等标签构建。通过CSS可以自定义表格的样式，包括边框、背景色、间距等。

基础表格结构

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据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:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行背景色 */
}

悬停效果

tr:hover {
  background-color: #e6e6e6; /* 鼠标悬停时背景色 */
}

响应式表格

对于小屏幕设备，可以通过CSS使表格水平滚动：

.table-container {
  overflow-x: auto; /* 启用水平滚动 */
}

table {
  min-width: 600px; /* 设置最小宽度 */
}

隐藏表头

在某些设计中，可能需要隐藏表头：

th {
  display: none;
}

通过以上CSS样式，可以灵活地自定义表格的外观和交互效果，无需依赖JavaScript或其他库。