Change orientation to vertical, table rows HTML + CSS

问题

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?

回答1:

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>

回答2:

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.

回答3:

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.

回答4:

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

回答5:

<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

来源：https://stackoverflow.com/questions/41468762/change-orientation-to-vertical-table-rows-html-css