css div制作表格

CSS Div 制作表格的方法

使用 <div> 元素结合 CSS 可以模拟传统 <table> 的布局效果，适合需要更灵活样式控制的场景。

基础结构

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

通过 display 属性实现表格布局效果：

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
}

高级样式扩展

添加悬停效果和斑马纹：

/* 斑马纹 */
.row:nth-child(even) {
  background-color: #f2f2f2;
}

/* 悬停高亮 */
.row:hover {
  background-color: #e6e6e6;
}

响应式处理

通过媒体查询在小屏幕下调整布局：

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

与传统表格的对比

• 优势：更灵活的样式控制，易于实现复杂交互效果
• 劣势：语义化较弱，对屏幕阅读器支持不如原生 <table>

注意：若需严格遵循语义化，建议优先使用原生 <table> 元素。