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

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;
    }
}

这里是上述的一个方面： https://jsfiddle.net/speedplane/w0aLar56/4/

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

如何设置固定填充和百分比宽度到表格单元格？

Answer 1

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