当前位置：首页 > CSS

css分类表格制作

2026-04-01 19:47:55CSS

CSS分类表格制作方法

使用HTML和CSS创建基础表格结构

HTML部分定义表格框架，CSS控制样式表现。表格由<table>标签包裹，<tr>代表行，<th>为表头，<td>为单元格数据。

<table class="classified-table">
  <thead>
    <tr>
      <th>类别</th>
      <th>项目</th>
      <th>数值</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">A类</td>
      <td>项目1</td>
      <td>120</td>
    </tr>
    <tr>
      <td>项目2</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

通过CSS添加分类视觉样式

使用border-collapse合并边框，:nth-child()选择器实现斑马条纹效果，rowspan属性处理跨行分类。

.classified-table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
}

.classified-table th {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  text-align: left;
}

.classified-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

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

.classified-table tr:hover {
  background-color: #e6e6e6;
}

实现分类高亮效果

css分类表格制作

为不同分类添加颜色标识，通过CSS变量动态管理颜色方案。

.classified-table td[data-category="A类"] {
  border-left: 4px solid #3498db;
}

.classified-table td[data-category="B类"] {
  border-left: 4px solid #e74c3c;
}

.classified-table td[data-category="C类"] {
  border-left: 4px solid #f1c40f;
}

响应式表格处理

添加媒体查询确保移动端显示效果，横向滚动处理宽表格。

css分类表格制作

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

  .classified-table thead {
    position: sticky;
    top: 0;
  }
}

高级交互功能

结合CSS动画实现悬停特效，提升用户体验。

.classified-table td {
  transition: background-color 0.3s ease;
}

.classified-table th {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.classified-table th:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

注意事项