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

Question

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

具体来说，我希望除最后一列外的所有列都具有 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 应该生成一个 table，其中的列加起来为 200 像素，但在 Chrome 上它们加起来只有 192 像素，而在 Firefox 上它们加起来有 196 像素。我显然做错了什么。

如何为 table 个单元格设置固定的填充和百分比宽度？

Answer 1

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

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

Using Fixed Padding and Percentage Width in Table

html

css

css-tables