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?

BCDeWitt · Accepted Answer · 2015-10-28 13:57:42Z

1

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

answered Oct 28, 2015 at 13:57

BCDeWitt

4,8232 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

speedplane Over a year ago

Wow, border-spacing was the culprit, who would have thought! Thanks! For those interested, here is the updated jsfiddle: jsfiddle.net/speedplane/w0aLar56/6 Note that you can also set border-collapse: collapse; for a similar result.

Collectives™ on Stack Overflow

Using Fixed Padding and Percentage Width in Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related