不能直接对用display: flex，因浏览器对原生表格元素有强制渲染规则，会忽略或降级该声明；正确做法是改用div+flex模拟结构，外层column、行内row flex、单元格flex:1，并注意ie兼容、内容溢出及语义丢失问题。
为什么不能直接对 <table> 元素用 <code>display: flex
浏览器对 <table>、<code><tr>、<code><td> 等原生表格元素有强制渲染规则，即使你给 <code><table> 加了 <code>display: flex，大多数浏览器（Chrome/Firefox/Safari）会忽略它或降级为 display: table —— 这不是 bug，是规范行为。所以「在 <table> 里用 flex」这条路走不通。
<h3>用 <code>div + display: flex 模拟表格结构的正确写法
核心是放弃原生表格标签，用语义化或中性容器替代，并手动控制行列对齐与尺寸分配：
- 外层容器设
display: flex+flex-direction: column（模拟整张表） - 每一行（
<div class="row">）设 <code>display: flex+flex: 1或固定高度 - 每个单元格（
<div class="cell">）设 <code>flex: 1实现等宽自适应；若需不等宽，改用flex: 2、flex: 1等比例分配 - 表头单独处理：用
font-weight: bold+background-color替代<th>，无需 <code><thead> <p>示例片段：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><div class="flex-table"> <div class="row header"> <div class="cell">姓名</div> <div class="cell">年龄</div> <div class="cell">城市</div> </div> <div class="row"> <div class="cell">张三</div> <div class="cell">28</div> <div class="cell">杭州</div> </div> </div> <style> .flex-table { display: flex; flex-direction: column; } .row { display: flex; height: 40px; border-bottom: 1px solid #eee; } .cell { flex: 1; padding: 8px; border-right: 1px solid #eee; } .cell:last-child { border-right: none; } .header { font-weight: bold; background-color: #f5f5f5; } </style></pre> <h3>容易被忽略的兼容性与样式细节</h3> <p>Flex 模拟表格不是“换个标签就完事”，这些点不处理，视觉和交互会出问题：</p> <ul> <li> <code>flex: 1在 IE10–11 中需要前缀：-ms-flex: 1，且父容器必须有明确宽度（如width: 100%），否则子项不收缩 - 单元格内容过长时，默认会撑开整列 —— 加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap控制溢出 - 想让某列固定宽度（比如操作列），不要只设
width: 80px，要配合flex: 0 0 80px，否则其他列可能不均分剩余空间 - 表头悬停/排序图标、点击响应等交互逻辑需 JS 手动绑定，原生
<th> 的语义和默认行为（如 screen reader 识别）会丢失 <h3>什么时候该坚持用原生 <code><table>？ <p>如果数据具备明确的行列关系、需被屏幕阅读器正确解析、要支持打印样式、或需导出为 Excel（依赖 <code><table> 结构），就别强行 flex 模拟。Flex 表格更适合：仪表盘卡片式列表、后台管理页的轻量级数据展示、移动端横向滚动表格（此时用 <code>flex-wrap: nowrap+overflow-x: auto更可控）。真正难的不是写出来，而是判断「这里到底需不需要表格语义」——多数人一开始都低估了语义成本。
