使用css垂直堆栈表td元素

时间:2008-12-11 19:51:43

标签: css

有没有办法垂直堆叠选定的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>

3 个答案:

答案 0 :(得分:6)

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

.vertical{
 display:block;
}

答案 1 :(得分: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。

答案 2 :(得分:2)

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

.vertical{
    display:flex;
}

https://jsfiddle.net/mr5dhwj3/

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

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1