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

Answer 2

change the table-layout: fixed to auto

table {   table-layout: auto; } 

Find the working demo here: http://jsbin.com/atohug/2/edit

Answer 3

LinkinTED provided a workable solution, but the example doesn't directly address the OP's issue or explain why it works. The example should look like this (borrowing the same syntax)

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td colspan=2>Extra long content</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>

The OP's issue was that when you use table-layout: fixed the table expects every cell's width to be clearly defined in the first row so that it doesn't have to resize the columns as more content is added to subsequent cells in later rows. However, if you use colspan=2 in the first row, it has no idea how wide those two cells are, so it defaults to 50% of their combined width and that decision is fixed for the rest of the table. By using colgroup and specifying the widths for each column, the table can fix the column widths up front and you're free to use colspan=2 (or more) on the first row.

One caveat. col width= only supports pixels and %. If you need to use other units of width, associate col with a style as above.