小编Ous*_*ama的帖子

在 HTML/CSS 中垂直显示表格

我正在处理从 htlm 生成 PDF 文件的任务，我有一个超过页面宽度的表格，所以我正在寻找一种垂直显示该表格的方法。

如何在 html/css 中执行此操作（我使用的是 Bootstrap 4），请参阅以下源代码和图片：

源代码：

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

Run Code Online (Sandbox Code Playgroud)

当前结果：