Home/ Questions/Q 713635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T04:58:59+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0