css div表格制作

使用CSS创建div表格

通过CSS和div元素可以模拟传统表格布局，实现更灵活的样式控制。

基本结构

<div class="table">
  <div class="row">
    <div class="cell">标题1</div>
    <div class="cell">标题2</div>
  </div>
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
  </div>
</div>

CSS样式设置

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

.row {
  display: table-row;
}

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

响应式表格实现

添加媒体查询使表格在小屏幕上显示为块状布局：

@media screen and (max-width: 600px) {
  .row {
    display: block;
    margin-bottom: 10px;
  }
  .cell {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

高级样式定制

为表格添加斑马纹效果：

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

.row:first-child .cell {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

固定表头实现

创建固定表头滚动表格：

.table-container {
  height: 300px;
  overflow-y: auto;
}

.header-row {
  position: sticky;
  top: 0;
  z-index: 100;
}

注意事项

使用div表格时需确保语义化，对于纯数据展示建议优先考虑原生table元素。div表格更适合需要复杂样式控制或特殊布局的场景。确保添加适当的ARIA角色属性增强可访问性：

<div class="table" role="table">
  <div class="row" role="row">
    <div class="cell" role="cell">...</div>
  </div>
</div>