HTML表格表头文本旋转与列宽自适应调整问题求助
问题:旋转HTML表格表头后列宽无法缩小且文本换行(适配WeasyPrint导出PDF)
您好,感谢社区现有内容的帮助,但我仍未解决当前问题。我对HTML/CSS经验较少,期待您的反馈。
操作流程
- 将数据导入为dataframe
- 使用
to_html()方法将dataframe转换为带有myfavourite_table类的HTML表格 - 将该表格嵌入现有HTML文档,再通过WeasyPrint导出为PDF
遇到的问题
由于表格表头标题远长于列内数据所需宽度,我尝试旋转表头文本并调整列宽,但遇到两个问题:
- 文本旋转后列宽无法缩小
- 表头文本持续换行
使用的CSS代码
.myfavourite_table { font-size: 9pt; font-family: Arial; border-collapse: collapse; border: 1px solid silver; border-spacing: 0px 10px; text-align: center; vertical-align: middle; } .myfavourite_table th:not(:nth-child(12)) { transform: rotate(-90deg) translate(0, 0px); writing-mode: vertical-rl; padding: 0; margin: 0; height: 150px; white-space: no-wrap; font-size: 8pt; } .myfavourite_table th:nth-child(12), td:nth-child(12) { text-align: left; } .myfavourite_table td { padding-top: 0.8em; padding-bottom: 0.8em; } .myfavourite_table tr:nth-child(even) { background: #E0E0E0; }
使用的HTML代码
<table border="1" class="dataframe myfavourite_table"> <thead> <tr style="text-align: right;"> <th>Column Here</th> <th>Another Column</th> <th>Column Here</th> <th>Column Please</th> <th>Column Again</th> <th>Column</th> <th>Column</th> <th>Longer Column Var 1</th> <th>Longer Column Var 2</th> <th>Longer Column Var 3</th> <th>Longer Column Var 4</th> <th>Not vertical</th> <th>Binary1</th> <th>Binary2</th> </tr> </thead> <tbody> <tr> <td>O</td> <td>NO</td> <td>1</td> <td>YES</td> <td>1</td> <td>O</td> <td>2</td> <td>0.0</td> <td>15.0</td> <td>0.0</td> <td>0.0</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sem a nisl dignissim porta. Mauris non hendrerit sapien. Duis lobortis metus justo, accumsan fermentum nisl molestie eu.</td> <td>1</td> <td>0</td> </tr> <tr> <td>O</td> <td>NO</td> <td>1</td> <td>NO</td> <td>1</td> <td>O</td> <td>2</td> <td>0.0</td> <td>1.0</td> <td>0.0</td> <td>0.0</td> <td>Maecenas ut est vitae eros tempor bibendum. Sed placerat vestibulum ornare.</td> <td>0</td> <td>0</td> </tr> <tr> <td>O</td> <td>I</td> <td>1</td> <td>I</td> <td>1</td> <td>T</td> <td>2</td> <td>0.0</td> <td>9.2</td> <td>0.0</td> <td>0.0</td> <td>Pellentesque nec ullamcorper neque. Morbi odio est, rutrum in massa non, venenatis vestibulum odio. Proin a sem venenatis, consectetur dolor eu</td> <td>0</td> <td>0</td> </tr> <tr> <td>O</td> <td>I</td> <td>1</td> <td>NO</td> <td>1</td> <td>C</td> <td>2</td> <td>0.0</td> <td>30.0</td> <td>10.0</td> <td>0.0</td> <td>Maecenas cursus viverra malesuada. Vivamus ipsum purus, hendrerit et cursus et, fringilla vel tortor. Donec fringilla lacus lacinia nisi posuere, in tincidunt massa tincidunt. Cras aliquet fermentum sapien non fringilla. Nunc sodales vitae nibh vitae bibendum. Curabitur pellentesque auctor magna, sed bibendum arcu laoreet facilisis </td> <td>1</td> <td>0</td> </tr> </tbody> </table>
我已在Excel中制作了目标输出样式(见附图),当前需求主要是适配WeasyPrint导出PDF的前置处理。
注:我已参考过相关问题,但该方案无法解决我的问题。
内容的提问来源于stack exchange,提问作者Hamsandwich
相关产品推荐
相关产品推荐

