CSS 表格布局

调节表格布局算法、边框合并方式、边框间距、标题位置与空单元格显示,实时预览固定布局与自动布局的差异,并一键复制可用的表格 CSS 代码,全部在浏览器本地完成。

参数设置 可实时预览

边框间距仅在 border-collapse 为 separate 时生效,collapse 模式下会自动忽略该属性。

实时预览
季度销售概况
地区销售额同比增长
华东128 万12%
华南96 万8%
华北-3%

第三行「华北」的销售额为空,可切换 empty-cells 观察差异。

生成的 CSS
布局算法auto
边框合并collapse
边框间距—
空单元格show

          

复制后可直接粘贴到样式表中,选择器默认为 table。

使用规则
  • table-layout: fixed 时列宽只取决于首行或显式宽度的列,内容过长只会换行或溢出。
  • table-layout: auto 会根据全部单元格内容计算列宽,灵活但渲染开销更大。
  • border-collapse: collapse 会把相邻边框合并为一条,此时 border-spacing 不生效。
  • border-spacing 可写一个值表示横纵相同,或两个值分别表示水平与垂直间距。
  • empty-cells: hide 只在边框分离模式下生效,不会让单元格塌陷。
  • caption-side 控制 caption 显示在表格上方还是下方。