以HTML/CSS垂直显示表格

我正在执行一项任务，从htlm生成一个PDF文件，我有一个表超出了页面宽度，因此我正在寻找一种方法来垂直显示该表

如何在html/css中实现这一点（我使用的是Bootstrap 4），请参阅以下源代码和图片：

源代码：

#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特

您可以使用

transform

CSS属性实现相同的功能。您可以使用

position:absolute

，或通过精确设置

边距

，或以适合您需要的正确方式使用

变换原点

来调整表格的位置。例如，可以使用下面的CSS

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

（或）

桌子{
变换：旋转（-90度）；
位置：绝对位置；
底部：3rem；
左：0；
}
#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特

使用

transform

和

transform origin

css基于左上角旋转桌子，并使用translate移动位置

表格{
宽度：600px；
变换原点：左上角；
变换：旋转（-90度）平移（-100%）；
}

#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特

html

css

.轮换{
变换：旋转（270度）translateX（-15em）translateY（-15em）；
}
.桌子{
宽度：50%；
}

---

我知道已经给出了一个更好的答案，但我是这样做的。

您也可以使用

编写模式

并通过bs4类或自定义重置一些CSS规则

.lr{
写入方式：垂直rl；
/*写入模式：侧向lr；仅在firefox中可用*/
变换：缩放（-1）；/*反转，改为侧向使用*/
/*显示：内联表格；*/*如果未涉及网格或flex，则为可选*/
}
.lr.border tr>*{
边界：无；
左边框：实心1px灰色；
}

#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特

您为什么要这样做？这只会让用户感到困惑。我在问题中添加了更多细节

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

<table class="table rotate">

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