当前位置：首页 > CSS

只用css制作表格

2026-01-28 13:42:31CSS

使用纯CSS制作表格

可以通过CSS的display: table系列属性模拟HTML表格结构，无需使用<table>标签。以下是一个完整示例：

<div class="css-table">
  <div class="css-table-row header">
    <div class="css-table-cell">姓名</div>
    <div class="css-table-cell">年龄</div>
    <div class="css-table-cell">职业</div>
  </div>
  <div class="css-table-row">
    <div class="css-table-cell">张三</div>
    <div class="css-table-cell">28</div>
    <div class="css-table-cell">设计师</div>
  </div>
</div>

.css-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.css-table-row {
  display: table-row;
}

.css-table-cell {
  display: table-cell;
  padding: 12px;
  border: 1px solid #ddd;
}

.header .css-table-cell {
  font-weight: bold;
  background-color: #f5f5f5;
}

响应式表格设计

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

只用css制作表格

@media (max-width: 600px) {
  .css-table, .css-table-row {
    display: block;
  }

  .css-table-cell {
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }

  .css-table-cell::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 10px;
  }
}

需要为每个单元格添加data-label属性：

只用css制作表格

<div class="css-table-cell" data-label="姓名">张三</div>

表格样式增强

添加悬停效果和斑马条纹：

.css-table-row:not(.header):hover {
  background-color: #f9f9f9;
}

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

边框控制技巧

实现单一边框效果：

.css-table {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.css-table-cell {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.css-table-cell:last-child {
  border-right: none;
}

.css-table-row:last-child .css-table-cell {
  border-bottom: none;
}

这种方法提供了比传统HTML表格更灵活的样式控制，同时保持了语义化结构。