如何使用flex-box展示表格数据？能否用div替代table实现布局？

能否用div+flex替代原生table？ #

完全可以。如果你需要做通用度高、样式自定义能力强的表格组件，div结合flexbox的实现反而比原生table更灵活，更容易适配各种业务场景和响应式需求。

具体实现方法 #

你之前写的div版本缺少和原生table对应的分层结构，只需要按照「表格容器→表头→表头行→表头单元格→表体→数据行→数据单元格」的层级拆分结构，每层用flex控制布局即可，具体代码如下：

模板代码 #

<template>
  <div id="app">
    <!-- 表格容器 对应原生table -->
    <div class="table-container">
      <!-- 表头 对应原生thead -->
      <div class="table-header">
        <div class="table-row">
          <div class="table-cell header-cell">date</div>
          <div class="table-cell header-cell">image</div>
          <div class="table-cell header-cell">title</div>
          <div class="table-cell header-cell">press</div>
        </div>
      </div>
      <!-- 表体 对应原生tbody -->
      <div class="table-body">
        <div class="table-row" v-for="item in items.results" :key="item.id">
          <div class="table-cell">{{ item.pub_date }}</div>
          <div class="table-cell">{{ item.image.file }}</div>
          <div class="table-cell">{{ item.title }}</div>
          <div class="table-cell">
            <!-- 你原来的downloads模块放在第四个单元格内 对应原table的press列 -->
            <div class="downloads">
              <span
                v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
                :key="downloadable.id"
              >{{ downloadable.document_en.file }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

flex样式代码 #

.table-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}
.table-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
}
/* 表头单元格样式 */
.header-cell {
  background: #fafafa;
  font-weight: 600;
}
.table-cell {
  /* 这里可以根据需求调整宽度 比如固定宽度写flex:0 0 120px 均分就写flex:1 */
  flex: 1;
  padding: 12px 16px;
  /* 内容溢出省略 不需要可以删掉 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 最后一行去掉下边框 */
.table-body .table-row:last-child {
  border-bottom: none;
}

补充说明 #

• 如果你需要无障碍支持，给对应div加上ARIA属性即可：外层容器加role="table"，行加role="row"，单元格加role="cell"，表头单元格加role="columnheader"，就能达到和原生table一致的无障碍识别效果。
• 这种实现的通用性更强：小屏幕下可以直接把.table-row的flex-direction改成column，快速切换为卡片式布局，原生table实现该需求要复杂很多；自定义固定表头、固定列、单元格合并等特性也比原生table更可控。
• 你原来的原生table代码有语法错误：<tr>的直接子元素只能是<th>或<td>，不能直接放<div>，那个downloads模块需要放在第四个<td>内部。

内容的提问来源于stack exchange，提问作者Balazs Kelemen