表格样式：双线、列宽、横向溢出怎么修

后台列表页上线，产品截图圈了三处：相邻两行的边框叠成 2px 粗线，标题一长列宽就被撑歪，手机上一整块横向溢出。数据没问题，全是 CSS 的事。

双线是 border-collapse 没设

td 各自带边框，相邻两条叠在一起就是 2px。table 上加 border-collapse: collapse 立刻变单线，border-spacing 归零。想要更轻的观感，只给 td 加 border-bottom，表头再加一条深一点的线，比满屏网格干净得多。

列宽要靠 table-layout 锁住

默认布局按内容算宽度，一列长文本就能把整张表挤变形。table-layout: fixed 配 width: 100%，再给每列指定宽度，浏览器就按你给的来。长文本配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis，前提是那一列有确定宽度，否则省略号不会出现。

数字和文字的对齐规则

金额、数量右对齐，字体加 font-variant-numeric: tabular-nums，数字等宽，列不会来回跳。文本左对齐，表头跟内容对齐方式保持一致，否则一眼看过去很乱。状态标签统一居中或者统一左对齐，别一行一个样。

窄屏别硬折行

外面套一层 div，overflow-x: auto，表格给个 min-width: 720px，手机上左右滑动看，比把每行压成三行可读得多。表头要跟随滚动，就给 thead th 设 position: sticky、top: 0 和实心背景色，注意祖先元素不能有 overflow: hidden，否则 sticky 直接失效。

最小可用的一套样式

斑马纹用 tbody tr:nth-child(even) 的浅灰就够，hover 再深一档。表格样式的难点从来不是配色，是列宽和溢出，这两处稳了，剩下都是微调。