时间戳

首页 > 解决方案 > 如何在 CSS 中堆叠表格中仅一行的 TD 元素？

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

问题描述

理想情况下，我会使用 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>

标签： htmlcss

解决方案

不知道是不是你需要的。但是，如果你需要一个 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>

推荐阅读