div css制作表格

使用DIV和CSS制作表格

使用DIV和CSS可以创建灵活的表格布局，避免传统HTML表格的局限性，同时保持响应式设计。

基本结构

HTML部分使用嵌套的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样式设置

通过CSS的display属性模拟表格行为：

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

.row {
  display: table-row;
}

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

响应式处理

添加媒体查询使表格在小屏幕上自适应：

@media (max-width: 600px) {
  .table, .row, .cell {
    display: block;
  }
  .row {
    margin-bottom: 15px;
  }
  .cell {
    padding: 6px;
    border: none;
    border-bottom: 1px solid #eee;
  }
}

高级样式选项

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

.row:hover {
  background-color: #f5f5f5;
}

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

固定表头实现

对于长表格可以固定表头：

.table {
  position: relative;
}

.row:first-child {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}