昨天产品经理甩来个需求，说要给后台加个数据展示表格。我寻思这不就是table标签套个马甲的事嘛结果刚搭完架子就被打脸了。今天把踩坑经历捋一捋，你们以后遇到类似需求直接抄作业。

原生表格直接翻车

起手式贼简单：<table><tr><td>三件套直接糊上去。结果在手机屏上变成俄罗斯方块——文字叠得亲妈都不认识，还得左右扒拉屏幕看数据。更绝的是表头跟着内容一起滚动，划两下就分不清哪列是哪列了。

三板斧救急方案

硬着头皮试了几个野路子：

• 百分比布局：给每列设width:20%，第二列文字多点就直接撑破容器
• 隐藏列：用@media query手动写断点，手机屏直接干掉三列重要数据
• 表格内滚动：给div包层overflow-x:auto，结果表头被滚没了

正骂骂咧咧的时候，突然想起以前瞄见过的CSS Grid方案。当场翻文档试水，这玩意儿比float靠谱太多了！

网格布局实战

核心代码就两块：
1. 容器设置：
display: grid;


grid-template-columns: 120px auto 1fr minmax(100px, 200px);

这里的关键是minmax()函数，既能保证最小宽度，又能在空间足时自动拉伸。

2. 表头固化：

用position:sticky把表头钉在顶部。重点要配top:0，不然钉了个寂寞： thead th{ position:sticky; top:0; }

响应式破局

到手机端直接乾坤大挪移：
@media (max-width:768px){


grid-template-columns: 1fr; / 列转行 /

td::before { content: attr(data-label); } / 字段名前置 /

这里骚操作是给每个td加data-label属性存字段名，小屏时用伪元素显示，立马变身清爽列表。