使用css垂直堆疊表格td元素

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

你也可以讓它們 display:block 但我不太確定這會對表格布局產生什么影響。

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

我需要在響應速度正常的情況下使用它，在這種情況下，表格通常是水平呈現的，但在某些情況下只能垂直呈現。