如何通过CSS实现表格宽度与自身列总宽度相等

无需修改模板内的任何标签属性，直接追加以下CSS规则即可实现表格宽度自动等于所有列的总宽度：

table.quill-better-table {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: 1.25cm;
  /* 核心规则 */
  table-layout: fixed;
  width: auto !important;
}

table.quill-better-table th,
table.quill-better-table td {
  border: 1px solid black;
  border-collapse: collapse;
  /* 防止边框/内边距/长内容撑宽列 */
  box-sizing: border-box;
  word-break: break-word;
}

规则说明 #

• table-layout: fixed：将表格切换为固定布局模式，该模式下浏览器会严格按照<col>标签定义的数值渲染列宽，不会强制拉伸列去填满table标签预设的宽度
• width: auto !important：由于原table标签写了内联宽度属性，内联样式优先级高于普通CSS，必须加!important才能覆盖原有固定宽度设置，让表格宽度根据col定义的列宽总和自动收缩适配
• box-sizing: border-box：让单元格的边框、内边距都纳入col设定的宽度范围内计算，不会额外增加总宽度
• word-break: break-word：避免单元格内长文本/无空格内容撑破设定的列宽，保证列宽完全和col定义一致

适配说明 #

该方案对动态列数完全兼容，不管表格渲染时生成多少列，只要col标签正确配置了对应列的宽度，表格总宽度都会自动匹配所有列宽的总和，不需要针对列数做额外逻辑处理。以提供的示例代码为例，原table预设宽度为246px，单col宽度为79px，应用规则后表格会自动收缩到匹配列宽的尺寸，不会再出现右侧多余空白的异常。

内容的提问来源于stack exchange，提问作者Ellen