CODEWITHSUNDEEP
htmlcssrowstranspose
vbadater
vbadater

Reputation: 13

CSS Transpose the HTML (Rows to Columns)

How do I transpose HTML rows to columns?

I found several ways, but failed to keep proper order in the table.

Here is the HTML and CSS:

#t01 {
  background-color: lightgoldenrodyellow
}
<table id="t01">
  <thead>
    <tr>
      <th>MultipleChoice : </th>
      <th>FreeTextQuestin:</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Option_1</td>
      <td>my answer</td>
    </tr>
  </tbody>
</table>

It looks like this: CurrentStyle

And I would like to have like this: mainTarget

The number of rows is dynamic and I would love to use only CSS. Thanks in advance!

Upvotes: 1

Views: 1481

Answers (1)

rakoilazer
rakoilazer

Reputation: 21

There is several answers to your question, you can either use the css grid property

or you can just do :

<table id="t01">
    <tbody>
        <tr>
            <th>MultipleChoice : </th>
            <td>Option_1</td>
        </tr>
        <tr>
            <th>FreeTextQuestin: </th>
            <td>My answer </td>
        </tr>
    </tbody>
</table>

Upvotes: 2

Related Questions