CSS DEVELOPMENT LAB · 08

响应式表格

表格最难的不是“画边框”，而是内容一多、屏幕一窄后如何保持可读性。 本实验重点研究横向滚动、最小宽度、Sticky 表头、Sticky 首列与移动端策略。

PRIMARY SOLUTION

先保留表格语义，再处理溢出

对产品规格、价格、参数、后台数据这类真正的二维数据， 首选方案通常不是把表格拆掉，而是让外层容器负责横向滚动。

型号 尺寸 表面处理 颜色 适用场景 质保 状态
CW-140 140 × 23 mm 木纹压花 Teak / Walnut / Grey 庭院、露台、步道 15 年 常规
CW-150 Pro 150 × 25 mm 深压纹 + 拉丝 Charcoal / Oak / Sand 酒店、商业景观、泳池周边 20 年 推荐
CL-219 219 × 26 mm 细木纹 Black / Cedar / Coffee 建筑外墙、立面改造 15 年 常规
FN-90 90 × 40 mm 哑光 Brown / Dark Grey 住宅围栏、花园隔断 10 年 定制
SL-60 60 × 30 mm 木纹膜压 Natural Oak / Walnut 室内背景墙、格栅吊顶 10 年 新品

手机端可左右滑动表格 →

STICKY HEADER + FIRST COLUMN

长表格中的定位辅助

当表格同时很宽、很长时，可以固定表头与第一列，让用户在滚动时始终知道当前行和当前字段。

产品 Jan Feb Mar Apr May Jun Jul Aug Sep
Decking A128146139158172181194205219
Decking B92104118121130142149161170
Cladding A75829096101110116128136
Cladding B667380849198107111120
Fencing A546165707680889599
Fencing B485257636975828794
Slat Wall434852566067717782
Accessories118126132140147155164172181

MOBILE STRATEGY

不是所有表格都应该卡片化

如果用户需要横向比较多列数据，保留表格并允许横向滚动通常更合理。 只有当每一行本质上是一条独立记录时，移动端卡片化才更自然。

需要横向比较 保留 Table + 横向滚动
列很多且数据密集 Sticky Header / First Column
每行是一条独立记录 可以考虑手机端卡片化

OPTIONAL CARD MODE

适合“记录型数据”的移动端表达

CW-140

尺寸
140 × 23 mm
颜色
Teak / Walnut / Grey
场景
庭院、露台、步道
质保
15 年

CW-150 Pro

尺寸
150 × 25 mm
颜色
Charcoal / Oak / Sand
场景
酒店、商业景观
质保
20 年