如何在CSS中堆叠表格的一行的TD元素？

Question

Ideally I would use divs, but it is not an option.

I need too stack up or pile up TD inside one row of a table, while leaving the rest as it is.

With display: block; it kind of works, except then all the TD stack up are only the width of one column. (see code)

Is there a way to, in css, stack up TD and make them 100% of the row?

Many thanks in advance!

 .red { border: solid red 0.25em ; display: block; } .blue { border: solid blue 0.25em ; display: block; } td { border: solid grey 0.25em ; }

 <table> <tr> <td>top row</td> <td>top row</td> <td>top row</td> </tr> <tr> <td class="blue" > needs to go on top of the other td</td> <td class="red" > </td> <td class="red"> </td> </tr> </table>

Answer 1

I don't know if it's what yuo need.But, if you need a tr on top of a table, you can usethead like below

<table>
    <caption>Council budget (in £) 2018</caption>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th scope="col">Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
</table>