表格图片撑破单元格是因默认table-layout: auto导致列宽随内容动态变化，解决方法是设table-layout: fixed、配合col指定列宽，并用object-fit: cover+height控制图片尺寸。
表格里塞图片会撑破单元格？用 table-layout: fixed 锁死列宽
默认表格是 table-layout: auto，浏览器会根据内容（尤其是未设宽高的图片）动态计算列宽，结果就是图片一加载，整列突然变宽，隔壁文字被挤换行甚至溢出容器。这不是 bug，是默认行为。
解决方法很简单：给 <table> 加上 table-layout: fixed，再配合 width 和 col 或 th/td 的显式宽度声明：
<table style="table-layout: fixed; width: 100%;">
<col width="120"><!-- 图片列固定120px -->
<col width="200"><!-- 名称列 -->
<col width="80"><!-- 价格列 -->
<thead><tr><th>图</th><th>名称</th><th>价格</th></tr></thead>
<tbody>
<tr>
<td><img src="a.jpg" alt="商品图" style="width: 100%; height: 100px; object-fit: cover;"></td>
<td>无线降噪耳机</td>
<td>¥299</td>
</tr>
</tbody>
</table>-
object-fit: cover防止图片拉伸变形，必须配height才生效 - 不要只靠
img { max-width: 100% }—— 在fixed表格里它不拦得住高度失控 - 如果列数多、响应式要求强，改用
colgroup+col比在每个td上写width更可靠
图文混排不是只能靠 float 或 flex？<table> 本身就能做左右并排
很多人一想到“图文并排”就跳去写 div + flex，但电商列表里每行就是一个独立商品单元，<tr> 天然就是“行级并排容器”。只要把图片和文字放进同一行的不同 <td>，它们就自动左右对齐，无需额外布局代码。
关键点在于语义和结构控制：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 用
<th>定义表头列（如“商品图”“名称”“库存”），屏幕阅读器能识别，SEO 友好 - 避免把整张卡片（图+标题+价格+按钮）塞进一个
<td>再套 flex —— 这会让表格失去数据语义，变成“假表格” - 如果真要在一个单元格内混排（比如图右+文字左+操作按钮在下），才用
display: flex; flex-direction: column局部微调，而不是整表弃用
移动端表格横向滚动太生硬？加一层 <div class="table-wrapper">
直接让 <table> 响应式缩放会导致文字糊成一团，而强制 width: 100% 又常因列宽固定导致内容被裁。最稳妥的做法是用外层容器截断并允许横向滚动：
<div class="table-wrapper"> <table>...</table> </div>
对应 CSS：
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOS 滚动更顺 */
}
.table-wrapper table {
min-width: 800px; /* 至少保证桌面端完整显示 */
}- 别忘了给
th和td加white-space: nowrap防止文字换行破坏对齐 - 移动端可选加
@media (max-width: 768px) { .table-wrapper table { font-size: 14px; } }微调可读性 - 如果列太多（比如含 SKU、规格、状态等后台字段），建议优先隐藏非核心列，而不是硬撑滚动
为什么不用 display: grid 替代表格？语义错位风险比你想象的大
Grid 确实能做出更灵活的卡片网格，但它本质是“布局工具”，不是“数据表格”。当你用 div + grid 模拟商品列表时，以下问题会立刻浮现：
- 无法用
<caption>声明表格用途，辅助技术读不出“这是商品价格清单” - 排序、筛选、导出 Excel 等后端交互依赖
<table>的 DOM 结构，Grid 无法被原生表格 API 识别 - 打印时 Grid 会碎成一堆零散块，而
<table>自动保持行列关系 - 即使加
role="table"，也不能完全替代语义化标签的兼容性保障
真正需要图文混排灵活性的地方（比如首页推荐位、活动 banner），用 Grid 或 Flex；但商品列表这种结构化数据展示，<table> 不是过时，是不可替代。
