css - colspan messes with fixed width table

Question

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.

Answer 1

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