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

Question

理想情况下，我会使用 div，但这不是一种选择。

我也需要在桌子的一排内堆叠或堆积 TD，而其余部分保持原样。

带显示：块； 它有点工作，除了所有 TD 叠加只是一列的宽度。 （见代码）

有没有办法在 css 中堆叠 TD 并使它们占行的 100%？

提前谢谢了！

 .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

不知道是不是你需要的但是，如果您需要在表格顶部使用 tr，您可以使用如下所示的thead

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