为了让表格在手机上能横向滑动,给 table 加了 display: block,结果每列宽度全靠内容撑,数字列参差不齐,对齐看着很难受。日志里能对上时间点,这种反而好排。

display: block 让 table 丢掉表格布局算法,列宽不再按同行最宽的内容对齐,每行各算各的,列宽自然就散了。想靠它做横向滚动,代价就是列宽。这一点先确认清楚,后面就不用反复试。

.table-wrap { overflow-x: auto; }
table { min-width: 640px; table-layout: fixed; }

「table display block」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。偶发问题先统计频率,一小时几次和一天一次,查法完全不同。

改完顺手把文档补一句,省得下次自己重新推一遍。监控和日志的时间要对上,时区不一致会多绕很大一圈。

处理上按这个顺序:把 overflow 移到外层容器上,display: block 别加在 table 上,表格自己的布局要留着;需要固定列宽时,给 table 写 table-layout: fixed,再把每列宽度定下来,窄屏也别例外;保留表格语义,读屏软件才能正常念出表头和数据。

结果对不对很好判断,手机上表格能横滑,列宽整齐对齐,表头和数据不再错位,滚动也顺畅。

作者 9823189