使用css垂直堆栈表td元素

Question

有没有办法垂直堆叠选定的标准？我想拥有相同的表,但只使用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

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

.vertical{
    display:flex;
}

https://jsfiddle.net/mr5dhwj3/

我需要在响应性情况下使用此功能，其中表格通常水平呈现，但在某些情况下仅垂直呈现。

Answer 3

您需要创建堆积表

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