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 样式设置

.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) {
  .row {
    display: block;
    margin-bottom: 10px;
  }

  .cell {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

表格样式增强

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

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

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

固定表头实现

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

.table {
  position: relative;
}

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

这种方法比传统 table 元素更灵活，可以轻松实现各种现代 UI 设计效果，同时保持语义化的 HTML 结构。