CODEWITHSUNDEEP
htmlcss
Andrea Baccega
Andrea Baccega

Reputation: 27623

Move Thead section as first column

Consider the following html

<table>
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>data 1.1</td>
        <td>data 1.2</td>
        <td>data 1.3</td>
    </tr>
    <tr>
        <td>data 2.1</td>
        <td>data 2.2</td>
        <td>data 2.3</td>
    </tr>
</tbody>

It renders as the following image:

enter image description here

Is it possible by only using css to have the previous html render like the following image? (please note the indexes)

enter image description here

Upvotes: 3

Views: 1359

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122087

If you have to do this with css and you can't change your HTML you can do it with Flexbox.

table {
  display: flex;
}
thead tr, tbody tr {
  display: inline-flex;
  flex-direction: column;
}
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data 1.1</td>
      <td>data 1.2</td>
      <td>data 1.3</td>
    </tr>
    <tr>
      <td>data 2.1</td>
      <td>data 2.2</td>
      <td>data 2.3</td>
    </tr>
  </tbody>

Upvotes: 5

Related Questions