CSS - calc not working Firefox

Question

I am trying to dynamically add the widths to td which works fine in Chrome and Safari but not in FF.

HTML

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>1</td>
        <td>Title</td>
        <td>Interpret</td>
        <td>Album</td>
        <td>Year</td>
        <td>YouTube</td>
    </tr>
</table>

CSS

table{
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
}
td{
    border:1px solid red;
}
td:first-child{
  width: calc(100% / 6 * 0.5);
}
td:last-child{
  width: calc(100% / 6 * 2);
}

If I hard code the pixel value instead of 100% for eg., calc(690px / 6 * 2), it works.

You will have better luck with flexbox. – Nov 22 '16 at 14:39 — , Nov 22 '16 at 14:39

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Remove this line of CSS:

table {
    // table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

table-layout: fixed enables you to apply your own widths to a table. I have no idea why Firefox isn't coöperating with this given rule.

For reference: using calc() with tables

edited May 23 '17 at 12:30

Community

1
1

answered Nov 22 '16 at 14:36

roberrrt-s

7,914
2
46
57

@Turnip Oh? I read it from the top voted answer in the reference thread. I'll adjust it. Thanks! – roberrrt-s Nov 22 '16 at 14:40
Agreed! But fixed layout provides equal width to all the `td` and it doesn't change when the size of the content varies. – moustacheman Nov 22 '16 at 14:50

score -1 · Answer 2 · answered Nov 22 '16 at 14:59

In order for this to work, as I understand it, while attempting to simulate a fixed cell width is to change the table-layout from fixed to auto as well as set a default width for all td's.

To do this dynamically, we divide the table width by the number of columns (in this case as a percentage) -- 100 / 6 = 16.66666....

Then we use that value within the calc() for :first-child and :last-child, by replacing 100% with 16.6666% while also keeping the existing modifiers (0.5 and 2, respectively).

CSS

table{
    table-layout:auto;
    width: 100%;
    border-collapse: collapse;
}
td{

    border:1px solid red;
    width: 16.6666%;
}
td:first-child{
  width: calc(16.6666% * 0.5);
}
td:last-child{
  width: calc(16.6666% * 2);
}

Example Fiddle

You don't need to divide it manually, it will work when you change the `table-layout` to `auto`. — moustacheman, Nov 22 '16 at 15:57
@aravindtrue in order for it to work in Firefox, as per OP's request, it was necessary to do it manually or else all the columns between first and last would be varying widths. Setting it explicitly fixed this issue by having those columns be fluid, yet uniform, while still allowing first and last to be explicit (by percentage * modifier). — seantunwin, Nov 22 '16 at 16:06

CSS - calc not working Firefox

2 Answers2