vertically stack table td elements using css

Question

Is there a way to vertically stack selected td elments? I would like to have the same table, though display it differently using only css. Would this be possible, or do I have to have separate html markups? I would like to try to have the same html markup, though use different css for different sites/looks.

<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

You can also make them display:block but I''m not quite sure what effects this would hev on table lay-out.

.vertical{
 display:block;
}

Answer 2

For others trying to achieve this, for any weird reason, you could use

.vertical{
    display:flex;
}

https://jsfiddle.net/mr5dhwj3/

I needed this in a responsiveness situation where the table was rendered horizontally normally, but only vertically in some cases.

Answer 3

You need to create the table stacked

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

That is what tables are made for. If you want to use CSS you have to use DIVs.