Change orientation to vertical, table rows HTML + CSS

Question

I have this table:

<table id="tabla">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td></tr>
        <tr><th>row3</th><td>cccc</td></tr>
        <figure><img src="image.png"/></figure></td></tr>
    </tbody>
</table>

This organizes the information in rows... But I want to rotate it and display it in columns... I hope this is enough explanation for what I want:

How I have it now:

row1: aaaa
row2: bbbb
row3: cccc imag

How I want it:

 row1 | row2 | row3
 aaaa | bbbb | cccc
             | imag

How can I do this with CSS?

Possible duplicate of [How to invert (transpose) the rows and columns of an HTML table?](http://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table) that solution uses javascript though there is a css only one [here](http://stackoverflow.com/questions/16918094/html-table-with-vertical-rows) — happymacarts, Jan 04 '17 at 16:39

score 4 · Answer 1 · answered Jan 04 '17 at 16:39

4

If you are forced only to use CSS you can play with rotate :)

#table {
    transform:rotate(90deg);  
}
#table th, #table td{
    transform:rotate(-90deg);
}
td {
  height: 50px;
}

<table id="table">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
        <tr><th>row3</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
    </tbody>
</table>

answered Jan 04 '17 at 16:39

Troyer

6,765
3
34
62

Nice solution! But I think this is the best you're going to get with pure CSS. @Sergio If you want a better solution you need to construct the table in CSS. – Zak Jan 04 '17 at 16:41
1

@Zak I think this is not the best solution but at least was funny to do ! The best way is to rebuild the table correctly. :) – Troyer Jan 04 '17 at 16:44
Yes, I am going to rebuild the table in CSS. Anyway, I tried this solution and was not bad! :) – Sergio Jan 04 '17 at 16:46
Thanks. This is a good quick way to do this instead of spending my time for a more modern design... Also transform:rotate seems to have good support :) – Raymond Naseef May 30 '20 at 05:49

score 4 · Answer 2 · answered Mar 19 '19 at 15:41

Use display: flex on your tbody and set an evenly divided flex-basis on your table rows.

body {
  font-size: 20px;
  font-family: monospace;
}
table {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
tbody {
  display: flex;
  width: 800px;
  position: relative;
  align-items: stretch;
  border: 1px solid black;
  
}
tr {
  flex-basis: 33.33333333%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 5px 10px;
 
  
}
tr + tr {
border-left: 1px solid black;
}

th, td {
  flex-basis: 100%;
  text-align: left;
  display: flex;
  padding: 2px;
  
}
th {
  font-weight: bold;
}

<table id="tabla">
    <tbody>
        <tr>
          <th>row1</th>
          <td>aaaa</td>
        </tr>
        <tr>
          <th>row2</th>
          <td>bbbb</td>
        </tr>
        <tr>
          <th>row3</th>
          <td>cccc</td>
          <td>
            <figure>
              <img src="https://via.placeholder.com/150"/>
            </figure>
          </td>
        </tr>
    </tbody>
</table>

CodePen: https://codepen.io/jeffdaley/pen/WmgNRb?editors=1100

Borders might give you some trouble, but this should put you on the right track.

score 3 · Answer 3 · edited May 23 '17 at 12:25

3

This probably isn't the solution you're expecting, I would really encourage you to look at the new CSS Flexible Box Model instead of using HTML tables as it'll make your life much easier in these sort of scenarios.

If you're interested, take a look at my answer for a very similar question at Vertical Menu (+ Sub-Menu) stacks unnaturally.

edited May 23 '17 at 12:25

Community

1
1

answered Jan 04 '17 at 16:34

Zak

1,910
3
16
31

I prefer not modifying the table, but if I don't find more solutions maybe I use this. Thanks! – Sergio Jan 04 '17 at 16:38
Did you mean to make a dupe closure vote instead of posting a link to another Stack Overflow page? – mickmackusa Aug 04 '22 at 03:43

score -3 · Answer 4 · answered Dec 29 '18 at 14:41

-3

<table id="tabla">
    <tbody>
        <tr><th>row1</th><th>row2</th><th>row3</th></tr>
        <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
        
    </tbody>
</table>

use this

answered Dec 29 '18 at 14:41

Dilbeer Singh

9

3

The OP asked how to solve his problem with CSS. Your answer is simply a rewriting of the HTML, and you have omited the image. – Tedinoz Dec 29 '18 at 14:53

score -5 · Answer 5 · answered Dec 04 '19 at 06:48

I wonder why everybody is complicating this question. The answer is simple and clear, If you follow the right format of html table you probably wouldn`t face that problem.

<table id="tabla">
   <thead>
       <th class="rb">row1</th>
       <th class="rb">row2</th>
       <th>row3</th>
   </thead>
   <tbody>
       <tr><td class="rb">aaaa</td><td class="rb">bbbb</td><td>cccc</td></tr>
       <tr><td colspan="2" class="rb"></td><td><figure><img src="image.png"/> 
           </figure></td></tr>
   </tbody>
 </table>


  .rb{
      border-right: 1px solid #ccc;
   }

Just simple and basic like that...

This is actually the correct answer! But your approach in words is probably what gave it a -3 downvote, I up-ed it to -2 anyway. — Emeka Orji, Jun 27 '22 at 11:01

Change orientation to vertical, table rows HTML + CSS

5 Answers5

Linked