html - pdf下载文件不响应CSS

Question

我有使用写作模式设置样式的表头：vertical-lr。它完美地显示在屏幕上。

我使用相同的 CSS 来设置 PDF 文件的样式。但是，标题没有垂直显示。事实上，它不响应许多 CSS 样式。

我该怎么做才能使 PDF 文件在下载时像屏幕上一样显示？

<table>
<thead>
                    <tr>
                         <th style="border: 1px solid black; font-size:11px;width:120px;text-align:center;font-weight: bolder;color: black;vertical-align: bottom;">
                                                    SUBJECTS
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA1 10%
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA2 10%
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA3 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA4 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA5 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA6 10%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    CA TOTAL 60%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    EXAM 40%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    TOTAL 100%
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    GRADE
                                                </th>
                                               <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    HIGHEST IN CLASS
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    LOWEST IN CLASS
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    POSITION
                                                </th>
                                                <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                    REMARK
                                                </th>
                    </tr>
                </thead>
                </table>

标签： htmlcsspdfmpdf

Answer 1

我能够使用此解决方案解决此问题https://github.com/mpdf/mpdf/issues/357

我仅将 text-rotate 属性应用于标题的 tr 标记。

<table>
<thead>
<tr text-rotate="90">
<th><p>Element type 1A</p><p>Second line</p><th><p>Element type longer 2A</p></th>
<th>Element type 3B</th>
<th>Element type 4B</th>
</tr>
</thead>
</table>

标题中的文本全部旋转。