Using Fixed Padding and Percentage Width in Table

Question

How can one size elements in a table using both a percentage width and a fixed amount of padding for each element?

Specifically, I would like all columns except for the last to have a padding-right: 20px and I would like to size the widths of the columns using percent. I thought that the following css (scss actually) would do it:

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

Here's a jsfiddle for the above: https://jsfiddle.net/speedplane/w0aLar56/4/

The SCSS should result in a table with columns that add up to 200px, but on Chrome they only add up to 192px and on Firefox they add up to 196px. I'm clearly doing something wrong.

How should one set fixed padding and percent width to table cells?

Answer 1

I suppose different browsers have different defaults for border-spacing because border-spacing: 0px; on the table seems to fix it.