Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

colspan messes with fixed width table

Tags:

css

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

js-bin screenshot

** 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.

like image 727
Cotten Avatar asked Jul 24 '13 10:07

Cotten


People also ask

How do you fix a fixed width table?

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.

What effect does the Colspan have on the table data?

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.

How do you fix column width in a table?

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.

Can you set Colspan in CSS?

Yes, you can style colspan in CSS. All you need is a CSS attribute selector to manipulate the appearance of the CSS table colspan.


3 Answers

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

like image 143
LinkinTED Avatar answered Oct 02 '22 22:10

LinkinTED


change the table-layout: fixed to auto

table {   table-layout: auto; } 

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

like image 39
web2008 Avatar answered Oct 02 '22 22:10

web2008


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.

like image 38
Daemon42 Avatar answered Oct 02 '22 21:10

Daemon42