Geek Answers Handbook

How to build a complex table using CSS?

I recently came across a complex implementation of a table, for example:

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

As shown in this example, I want td1 and td3 to be fixed in width, td and td2 is the width automatically to expand when you change the width of the screen / radio / browser. I am wondering if there is a way to do this using CSS?

To be clear, I already used the colspan and width value for my purpose, but how can I make td1 smaller than th using the colspan and width value? colspan doesn't work nor width value

+5
source share
5 answers

It is just a matter of installing the flaps correctly.

Header Row: - 2 (3 * 2 colspan = 6 colspan-cells).
. - 3 (2 * 3 colspan = 6 colspan-cells).

UPDATE

, , , colspan, . , , ( ).

:

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

, th th th1 , td (td2). 50% , 240 , th1 120 .

, , , , - ( , ( imho)).

+6

, .

( td1, td3 . td2 .

... , , , , . , , 0 /.

, colspan.

+3

:

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

td, . , colspan td , ...

+2

All cells in the column are equal in width. To make the cells span multiple columns, use the attribute colspan. All cells in the joined row will expand to fill the entire width of the table.

0
source

More articles:


All Articles