colspan messes with fixed width table

css

Solution

You could also use `colgroup` and `col` to set the width:

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

With this CSS:

table { width: 100%; }
.short {
    background: lightblue;
    width: 20%
}
.long {
    background: lightgreen;
    width: 40%;
}
.multiCells { background: #F3A633; }

This way you do not need to give every `td` a class, makes it easier when you want to change the classname.

JSFiddle demo

colgroup MDN Article

Problem

I want a fixed-width table with 1 small and 2 large columns like so: ``` |..|....|....| |..|....|....| |..|....|....| ``` using ``` td.small { width: 20% } td.large { width: 40% } ``` Then I want to add an extra large col with colspan=2 like so ``` |.......|....| |..|....|....| |..|....|....| ``` using ``` td.small { width: 20% } td.large { width: 40% } td.extralarge { width: 60% } /* 20+40=60 */ ``` But I keep ending up with: ``` |.......|....| |...|...|....| |...|...|....| ``` A more graphical example is found on jsbin ** edit ** Sorry, I missed one detail: I must use (or so I think..?) `table-layout: fixed` since I'm having some special overflowing properties of the cells: ``` td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ``` Updated jsbin found here.

Original source