How to build a complex table by using CSS?

Question

Recently i ran into a complex table implementation, for example:

tr1: | td1 | td2 | td3 |
tr2: |  th  |   td   |
tr3: |  th  |   td   |
...

As this example shows, i want td1 and td3 are width fixed, td and td2 are width auto to expand when screen-radio/browser-width changed. I'm wondering if there is a way to do this by using CSS?

Just to be clear, i already used colspan and width value for my purpose, but how can i make td1 smaller than th by using colspan and width value? colspan doesn't work, neither width value

Answer 1

If you don't specify a width for a td their width will automatically increase as per contents of it. Also, you can use the colspan to equalize a td to what you like...

Answer 2

From that limited example, it looks to me like you need two tables.

One for the top row (explicitly set the width of td1, td3, and the entire table. Let td2 auto expand.

And one for the rest of the table... format it as you please, just set the table width to the same as the top row so it looks like one table. You'll probably have to set 0 margins/padding.

That, or you could make it one table and do some colspan hackery.

Answer 3

All cells in a column are equal width. To make cells span over several columns, use the colspan attribute. All cells in a row combined will expand to fill the whole width of the table.

Answer 4

It's a simple matter of setting the colspans correctly.

Table Header Row: Each Cell gets a colspan of 2 (3 Cells * 2 colspan = 6 colspan-cells).
Table Body Rows: Each Cell gets a colspan of 3 (2 Cells * 3 colspan = 6 colspan-cells).

UPDATE

There seems to be an inconsistency which involves Columns having both colspan and width set. The Browsers seem to ignore the width value and even max-width (min-width works).

Example:

<table border="1" style="width: 50%;">
    <tr>
        <td style="width: 100px;">td1</td>
        <td colspan="2">td2</td>
        <td style="width: 100px;">td3</td>
    </tr>
    <tr>
        <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th>
        <td colspan="2">td2</td>
    </tr>
    <tr>
        <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th>
        <td colspan="2">td2</td>
    </tr>
</table>

This produces roughly the desired output but the th column th1 expands to match the same size of the following td (td2). Both always occupy 50% of the table unless the table is smaller than 240px, then th1 stays at 120px.

This seems inconsistent to me and i have no workaround, best is if you check if you can display the table differently (i.e. same number of columns in all rows including the header (which would make more sense anyways imho)).

Answer 5

Try these colspans:

tr1: | td1(1) | td2(2) | td3(1) |
tr2: |  td1(2)   |   td2(2)     |
tr3: |  td1(2)   |   td2(2)     |
...