Display the table vertically in HTML/CSS

user_9575631 0
Viewed 207

I'm working on a task to generate a PDF file from htlm and I have a table that exceeds the page width so I'm looking for a method to display that table vertically.

How can do this in html/css (I'm using Bootstrap 4), please see the following source code and pictures:

Source code:

<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>
</body>
</html>

Current result:

enter image description here

Expected result:

enter image description here

Thank you in advance

bootstrap-4 css html
4 Answers

You can achieve the same with transform CSS property . You may adjust the placing of table either using position: absolute, or by setting margins accurately or by using transform-origin in a correct way which suits you needs. For example the below CSS can be used.

table{
   transform:rotate(-90deg);
    margin-left:-10rem;
    margin-top:6rem;
}

(OR)

 table {
  position:absolute;
   bottom:3rem;
   left:0;
   transform:rotate(-90deg)
}


<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<style>
table{
   transform:rotate(-90deg);
   position:absolute;
   bottom:3rem;
   left:0;
}
</style>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>
</body>
</html>

user_69389690

Use transform and transform-origin css to rotate the table based on the top left corner, and move the position using translate.

table {
  width: 600px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>
</body>
</html>

user_144776070

html

<table class="table rotate">

css

 <style>
  .rotate{
    transform:  rotate(270deg) translateX(-15em) translateY(-15em);
  }
  .table{
    width: 50%;
  }
</style>

I know an answer has been given and better but i did it this way.

user_144875580

You may also use writing-mode and reset a few CSS rules via bs4 class or custom.

.lr {
  writing-mode: vertical-rl;
  /* writing-mode: sideways-lr; only avalaible with firefox */
  transform:scale(-1);/* reverse, used  instead sideways*/
  /*display: inline-table; */ /* optionnal if grid or flex not involved */
}



.lr.border tr>* {
  border: none;
  border-left: solid 1px gray;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="box vh-100 d-flex ">
    <table class=" table lr h-75 border w-auto m-auto">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</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>
  </div>
</body>

</html>

user_24420990
Related