Question

有没有办法垂直堆叠选定的td元素？我想拥有相同的表，但只使用css以不同的方式显示它。这是可能的，还是我必须有单独的HTML标记？我想尝试使用相同的html标记，但为不同的网站/外观使用不同的CSS。

<table>
  <tr>
     <td class="vertical" id="one" >i'm</td>
     <td class="vertical" id="two" >above</td>
     <td class="vertical" id="three" >this</td>
     <td class="horizontal" id="four" >i'm horizontal</td>
  </tr>
</table>

Answer 1

你也可以让它们显示：阻止，但我不太确定这会对桌面布局产生什么影响。

.vertical{
 display:block;
}

Answer 2

您需要创建堆叠表

<table>
  <tr>
     <td class="vertical">i'm</td>
     <td class="horizontal" rowspan="3">i'm horizontal</td>
  </tr>
  <tr>
     <td class="vertical">above</td>
  </tr>
  <tr>
     <td class="vertical">this</td>
  </tr>
</table>

这就是表格的制作方法。如果你想使用CSS，你必须使用DIV。

Answer 3

对于其他尝试实现此目标的人，出于任何奇怪的原因，您可以使用

.vertical{
    display:flex;
}

https://jsfiddle.net/mr5dhwj3/

在响应性情况下，我需要这样做，在这种情况下，表通常是水平呈现的，但在某些情况下只是垂直呈现的。

使用css垂直堆栈表td元素

3 个答案: