将文本与 MPDF 中的底部对齐

Question

如何将表格标题中的文本与此 MPDF 文件的底部对齐？

<table class="table table-bordered" style="font-weight: bold;color: black;width:100%;">
<thead>
<tr text-rotate="90">
<th text-rotate="0" style="border: 1px solid black; font-size:16px;width:20%;text-align:center;font-weight: bold;color: black;vertical-align: bottom;">SUBJECTS </th>
<th style="border: 1px solid black;color: black;font-weight: bold; font-size:15px; width:40px; text-align:center;">CA1 10% </th>
<th style="border: 1px solid black;color: black;font-weight: bold;font-size:15px; width:40px; text-align:center;"> CA2 10% </th>
</tr>
</thead>
</table>

我似乎无法将标题中的文本移到底部。我试过 vertical-align=bottom 但没有运气。

Answer 1

只需将以下代码添加到您的 th

writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);

Answer 2

你可以试试这样的东西，希望对你有帮助。

th span{
writing-mode: vertical-rl;
transform: rotate(180deg);

}

<table class="table table-bordered" style="font-weight: bold;color: black;width:100%;">
<thead>
<tr text-rotate="90">
<th text-rotate="0" style="border: 1px solid black; font-size:16px;width:20%;text-align:center;font-weight: bold;color: black;vertical-align: bottom;"><span>SUBJECTS</span> </th>
<th style="border: 1px solid black;color: black;font-weight: bold; font-size:15px; width:40px; text-align:center;"><span>CA1 10% </span></th>
<th style="border: 1px solid black;color: black;font-weight: bold;font-size:15px; width:40px; text-align:center;"><span> CA2 10% </span></th>
</tr>
</thead>
</table>

Answer 3

我将“vertical-align:bottom”直接放置到了 并且它起作用了。我不知道为什么它以前不起作用。