在HTML/CSS中垂直显示表格

html5 • • 问答 • 213 阅读

我正在处理从 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>
  <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>

回答

您可以使用transformCSS 属性实现相同的效果。您可以使用position: absolute，或通过margins准确设置或以transform-origin适合您需要的正确方式使用来调整桌子的放置。例如，可以使用以下 CSS。

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

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

（或者）

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

以上是在HTML/CSS中垂直显示表格的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容