Rotating text within a HTML table header and resizing width of the column
Hello, firstly thanks to the community for so much existing content to help with this but I haven't been able to get to the bottom of my issue. I am relatively inexperienced with html/css so any feedback it appreciated.
My workflow for this problem looks like this:
- importing data as a dataframe
- converting dataframe using to_html() with a class called 'myfavourite_table'
- embedding that table in an existing html document and then using WeasyPrint to export it to a PDF.
The header titles for this table are substantially longer than the necessary width of the columns for the remaining data, so I have been working on rotating the text and resizing the columns appropriately. I have had two major issues with the html (this is prior to WeasyPrint pdf prep):
- The column widths will not reduce once the text is rotated
- The text keeps wrapping
.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;
}<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>I have formatted a target output in excel as shown below. For reference, I am not expecting this to be presented as a HTML (yet) but mainly for feeding into WeasyPrint.
Any help is greatly appreciated :)
EDIT: I have reviewed the proposed duplicate [https://stackoverflow.com/questions/272799/vertical-rotated-text-in-html-table] and ran it in my code and it does not address the issue as described in my question.
