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

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; 似乎可以修复它。