CODEWITHSUNDEEP
css
joshjdevl
joshjdevl

Reputation: 7222

vertically stack table td elements using css

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>

Upvotes: 7

Views: 18312

Answers (3)

Axelle
Axelle

Reputation: 472

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.

Upvotes: 6

Pim Jager
Pim Jager

Reputation: 32129

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

Upvotes: 8

Eduardo Molteni
Eduardo Molteni

Reputation: 39443

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.

Upvotes: 3

Related Questions