How to add Vertical header to the table

Question

I am trying to add one full width table header vertically, on the left side of the table as shown in image. But, I could not get how to do that.

So far, I could find only to add th in each row, however, I was not searching for that.

My html code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <th colspan="4" style="text-align:center">
        Horizontal Header
      </th>
    </tr>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

However, I am looking to add vertical header as shown in image below:

what about using `rowspan`? and CSS to rotate text 90 degrees — Martin, Aug 22 '19 at 13:56
Indeed...never saw a clear example of `rowspan` being required. It's not a **heading** if it's on a *side*. — Paulie_D, Aug 22 '19 at 14:36
@Paulie_D is there any hack for this to show something like this, it does not matter either its heading or not. — Aayush Dahal, Aug 22 '19 at 14:45

score 1 · Answer 1 · edited Aug 22 '19 at 15:33

1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <th colspan="4" style="text-align:center">
        Horizontal Header
      </th>
    </tr>
    <tr>
      <th scope="col"></th>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3"><span style="    position: absolute;
transform: rotate(-90deg);
top: 159px;
left: -22px;">Vertical Header</span></th>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

edited Aug 22 '19 at 15:33

Mehdi Ayari

478
5
13

answered Aug 22 '19 at 14:02

Creative Enemy

399
4
22

It does not seems fit. I want that, header to be on the left not on the first column. Your design just breaking the structure of the table. – Aayush Dahal Aug 22 '19 at 14:08
would it help to use a HTML design tool like Dreamweaver to design the vertical header. – Raghavan Aug 22 '19 at 16:10
@Aayush Dahal i edited Creative Enemy's post. Is that what you wanted ? – Mehdi Ayari Aug 23 '19 at 13:19

How to add Vertical header to the table

1 Answers1

Linked

Related