用css制作表格

基础表格结构

使用HTML的<table>标签创建表格框架，搭配<tr>（行）、<td>（单元格）和<th>（表头）标签。CSS通过border属性控制边框样式。

<table class="basic-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

.basic-table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}
.basic-table th, .basic-table td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px;
  text-align: left;
}
.basic-table th {
  background-color: #f2f2f2; /* 表头背景色 */
}

斑马纹效果

通过:nth-child(even)伪类为偶数行添加交替背景色，提升可读性。

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

响应式表格

当屏幕宽度不足时，通过媒体查询将表格转换为卡片布局。

@media (max-width: 600px) {
  .basic-table thead {
    display: none; /* 隐藏表头 */
  }
  .basic-table tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }
  .basic-table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }
  .basic-table td::before {
    content: attr(data-label); /* 通过data-label属性显示列名 */
    float: left;
    font-weight: bold;
  }
}

悬停高亮

为鼠标悬停的表格行添加高亮效果，增强交互性。

.basic-table tr:hover {
  background-color: #e6f7ff;
}

固定表头与滚动

通过设置tbody为固定高度并启用滚动，实现表头固定、内容滚动的效果。

.scrollable-table {
  display: block;
  max-height: 300px;
  overflow-y: auto;
}

边框样式定制

使用border-style和border-color自定义边框外观，如虚线或圆角。

.custom-border td {
  border: 2px dashed #aaa;
  border-radius: 4px;
}

合并单元格

通过colspan和rowspan属性合并单元格，配合CSS调整合并后的样式。

<td colspan="2">合并横向单元格</td>

td[colspan="2"] {
  text-align: center;
  background-color: #e0e0e0;
}