Align text vertically from bottom to top.

Question

I have a table with long headers.

I'm trying to rotate the text so that it passes from the bottom of the cell to the top.
I tried the writing-mode: vertical-rl; combination writing-mode: vertical-rl; and transform: rotate(-180deg);

The best I could think of was to add translateY(-100%) to the transform property.

I managed to place the text the way I wanted - so that it was at the bottom of the table cell, but now I can’t figure out how to move all this back down to align it properly.

 td span { border: 1px solid red; height: 200px; writing-mode: vertical-rl; transform: rotate(-180deg) translateY(-100%); } td { border: 1px solid; }

 <table> <tr> <td></td> <td><span>Tickets Included</span></td> <td><span>Best Seats</span></td> <td><span>Parking at tde Firehall tdeatre</span></td> <td><span>Tax Receipt Over Ticket Value</span></td> <td><span>Repeat Visits</span></td> <td><span>Voting Rights at tde AGM</span></td> <td><span>Playbill Listing</span></td> <td><span>Page to Stage Events</span></td> <td><span>Discounted Patron Rates for Additional Tickets</span></td> <td><span>Complimentary Beverage on Opening Night</span></td> <td><span>Front of tde Line Access</span></td> <td><span>Brochure Listing</span></td> <td><span>Parking at tde Springer tdeatre</span></td> <td><span>Invitation to First Day of Rehearsals</span></td> <td><span>Montdly 'Insider's Group'</span></td> <td><span>End of Season Dinner</span></td> </tr> <tr><td>Visionary<br>($10,000+)</td><td>30</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td></tr> <tr><td>Champion<br>($4,000-9,995)</td><td>20</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td></tr> <tr><td>Guardian<br>($1,400-3,995)</td><td>16</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td></tr> <tr><td>Benefactor<br>($690-1,399)</td><td>10</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td></tr> <tr><td>Partner<br>($490-685)</td><td>7</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Supporter<br>($390-485)</td><td>5</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table>

Based on a question from @dotwongdotcom .

association: stackoverflow.com/q/52375239/7394871 - Alexandr_TT

Accepted Answer · 2018-12-29T10:21:47

For browsers that do not support writing-mode , but support transformations, you can do this by turning square blocks. Only note that the width of the headers and line breaks in them must be set explicitly (in the example 1 line and 1.5em width). Vertical text alignment of headers can be controlled through vertical-align on th .

 table, tr, td, th { border: 1px solid; border-collapse: collapse; text-align: center; } table { width: 100%; } th { padding: .5em 0; } div { overflow: hidden; line-height: 1.5; width: 1.5em; margin: auto; } span { display: inline-block; white-space: nowrap; transform-origin: center; transform: rotate(-90deg); } span:before { content: ""; padding-top: 100%; float: left; }

 <table> <tr> <th><div></div></th> <th><div><span>Tickets Included</span></div></th> <th><div><span>Best Seats</span></div></th> <th><div><span>Parking at the Firehall Theatre</span></div></th> <th><div><span>Tax Receipt Over Ticket Value</span></div></th> <th><div><span>Repeat Visits</span></div></th> <th><div><span>Voting Rights at the AGM</span></div></th> <th><div><span>Playbill Listing</span></div></th> <th><div><span>Page to Stage Events</span></div></th> <th><div><span>Discounted Patron Rates for Additional Tickets</span></div></th> <th><div><span>Complimentary Beverage on Opening Night</span></div></th> <th><div><span>Front of the Line Access</span></div></th> <th><div><span>Brochure Listing</span></div></th> <th><div><span>Parking at the Springer Theatre</span></div></th> <th><div><span>Invitation to First Day of Rehearsals</span></div></th> <th><div><span>Monthly 'Insider's Group'</span></div></th> <th><div><span>End of Season Dinner</span></div></th> </tr> <tr><td>Visionary<br>($10,000+)</td><td>30</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td></tr> <tr><td>Champion<br>($4,000-9,995)</td><td>20</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td></tr> <tr><td>Guardian<br>($1,400-3,995)</td><td>16</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td></tr> <tr><td>Benefactor<br>($690-1,399)</td><td>10</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td></tr> <tr><td>Partner<br>($490-685)</td><td>7</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Supporter<br>($390-485)</td><td>5</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table>

Qwertiy ♦ 76.1k 17 73 199 · Answer 2 · 2018-12-11T16:22:01

I used the transform-origin: center in your css and I hope this is what you need:

 td span { border: 1px solid red; height: 200px; writing-mode: vertical-rl; transform-origin: center; transform: rotate(-180deg); } td { border: 1px solid; min-width: 1.5em; }

 <table> <tr> <td></td> <td><span>Tickets Included</span></td> <td><span>Best Seats</span></td> <td><span>Parking at tde Firehall tdeatre</span></td> <td><span>Tax Receipt Over Ticket Value</span></td> <td><span>Repeat Visits</span></td> <td><span>Voting Rights at tde AGM</span></td> <td><span>Playbill Listing</span></td> <td><span>Page to Stage Events</span></td> <td><span>Discounted Patron Rates for Additional Tickets</span></td> <td><span>Complimentary Beverage on Opening Night</span></td> <td><span>Front of tde Line Access</span></td> <td><span>Brochure Listing</span></td> <td><span>Parking at tde Springer tdeatre</span></td> <td><span>Invitation to First Day of Rehearsals</span></td> <td><span>Montdly 'Insider's Group'</span></td> <td><span>End of Season Dinner</span></td> </tr> <tr><td>Visionary<br>($10,000+)</td><td>30</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td></tr> <tr><td>Champion<br>($4,000-9,995)</td><td>20</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td></tr> <tr><td>Guardian<br>($1,400-3,995)</td><td>16</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td></tr> <tr><td>Benefactor<br>($690-1,399)</td><td>10</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td></tr> <tr><td>Partner<br>($490-685)</td><td>7</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td>Supporter<br>($390-485)</td><td>5</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td>•</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table>

Based on member response @enxaneta .

Learn how to check cross-browser compatibility, otherwise your examples can do a lot of harm to inexperienced readers.
Do you really think it is worth giving an example that is incorrectly displayed on MacOS and iOS?
Oh, I beg you, check someone else's code, and not just blindly link to it.
On a Mac in Safari: bit.ly/2LCyiXC (tested in Safari on Mojave and High Sierra), also in iOS, tested in Safari on the iPad and iPhone.
Keep two fair minuses, both for the question and for the answer, for deciding to arrange a question-answer and for making such gross mistakes.
@AlexandrKazakov, on my Windows in FF 64.0 it looks the same as on your screenshot from safari.
In general, you just need to ensure sufficient width of the columns and everything will become normal.
Chrome after all normally calculates the width, and in FF cant.
Perhaps you need some more properties to add to become correct.

Align text vertically from bottom to top.

2 answers 2

More articles: