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: Use the CSS table-layout Property. If you try to set fixed width for the table columns or <td> by simply applying the width property it may not work, because the default table layout algorithm is automatic.
Table cells can span across more than one column or row. The attributes COLSPAN (“how many across”) and ROWSPAN (“how many down”) indicate how many columns or rows a cell should take up.
The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
Yes, you can style colspan in CSS. All you need is a CSS attribute selector to manipulate the appearance of the CSS table colspan.
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
change the table-layout: fixed to auto
table { table-layout: auto; }
Find the working demo here: http://jsbin.com/atohug/2/edit
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With