在表格中使用固定填充和百分比宽度

Question

如何在表格中使用百分比宽度和每个元素的固定填充量的一个尺寸元素？

具体来说，我希望除最后一列之外的所有列都有padding-right: 20px，并且我想使用百分比来调整列的宽度。我认为以下css（实际上是scss）会做到这一点：

table {
    width: 200px;
    table-layout: fixed;
    colgroup {
       .c1 {
           width: 50%;
       }
       .c2 {
           width: 40%;
       }
    }
    td {
        border: 0px;
        padding-left: 0px;
        padding-right: 20px;
        word-break: break-all;
    }
    td:last-child {
        padding-right: 0px;
    }
}

这是上面的 jsfiddle： https://jsfiddle.net/speedplane/w0aLar56/4/

SCSS 应该会生成一个包含最多 200 像素列的表格，但在 Chrome 上它们最多只能增加 192 像素，而在 Firefox 上它们最多可以增加 196 像素。我显然做错了什么。

如何为表格单元格设置固定的内边距和百分比宽度？

Answer 1

我想不同的浏览器对border-spacing 有不同的默认值，因为桌子上的border-spacing: 0px; 似乎可以修复它。