从下到上垂直对齐文本

Question

我有一个 table 长 headers。我正在尝试旋转文本，使其从单元格底部延伸到顶部。我试过组合 writing-mode: vertical-rl;和变换：旋转（-180deg）；。

我能想到的最好的办法就是在转换中添加一个 translateY(-100%) 属性。这设法按照我希望的方式将文本排列到 table 单元格的底部，但现在我不知道如何将整个内容向下移动以正确对齐。

这是我正在处理的页面。向下滚动以查看 table.

我整个下午都在拔头发。任何想法将不胜感激。

http://www.1000islandsplayhouse.com/patron-members-club-new/

Answer 1

我在你的 css 中添加了 transform-origin: center center;。我希望这是你需要的。

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

td {border:1px solid;}

<table id="tablepress-1" class="tablepress tablepress-id-1">
<tbody class="row-hover">
<tr class="row-1 odd">
 <td class="column-1"></td><td class="column-2"><span>Tickets Included</span></td><td class="column-3"><span>Best Seats</span></td><td class="column-4"><span>Parking at the Firehall Theatre</span></td><td class="column-5"><span>Tax Receipt Over Ticket Value</span></td><td class="column-6"><span>Repeat Visits</span></td><td class="column-7"><span>Voting Rights at the AGM</span></td><td class="column-8"><span>Playbill Listing</span></td><td class="column-9"><span>Page to Stage Events</span></td><td class="column-10"><span>Discounted Patron Rates for Additional Tickets</span></td><td class="column-11"><span>Complimentary Beverage on Opening Night</span></td><td class="column-12"><span>Front of the Line Access</span></td><td class="column-13"><span>Brochure Listing</span></td><td class="column-14"><span>Parking at the Springer Theatre</span></td><td class="column-15"><span>Invitation to First Day of Rehearsals</span></td><td class="column-16"><span>Monthly 'Insider's Group'</span></td><td class="column-17"><span>End of Season Dinner</span></td>
</tr>
<tr class="row-2 even">
 <td class="column-1">Visionary<br>
(,000+)</td><td class="column-2">30</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14">•</td><td class="column-15">•</td><td class="column-16">•</td><td class="column-17">•</td>
</tr>
<tr class="row-3 odd">
 <td class="column-1">Champion<br>
(,000-9,995)</td><td class="column-2">20</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14">•</td><td class="column-15">•</td><td class="column-16">•</td><td class="column-17">•</td>
</tr>
<tr class="row-4 even">
 <td class="column-1">Guardian<br>
(,400-3,995)</td><td class="column-2">16</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14">•</td><td class="column-15">•</td><td class="column-16">•</td><td class="column-17"></td>
</tr>
<tr class="row-5 odd">
 <td class="column-1">Benefactor<br>
(0-1,399)</td><td class="column-2">10</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11">•</td><td class="column-12">•</td><td class="column-13">•</td><td class="column-14"></td><td class="column-15"></td><td class="column-16"></td><td class="column-17"></td>
</tr>
<tr class="row-6 even">
 <td class="column-1">Partner<br>
(0-685)</td><td class="column-2">7</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11"></td><td class="column-12"></td><td class="column-13"></td><td class="column-14"></td><td class="column-15"></td><td class="column-16"></td><td class="column-17"></td>
</tr>
<tr class="row-7 odd">
 <td class="column-1">Supporter<br>
(0-485)</td><td class="column-2">5</td><td class="column-3">•</td><td class="column-4">•</td><td class="column-5">•</td><td class="column-6">•</td><td class="column-7">•</td><td class="column-8">•</td><td class="column-9">•</td><td class="column-10">•</td><td class="column-11"></td><td class="column-12"></td><td class="column-13"></td><td class="column-14"></td><td class="column-15"></td><td class="column-16"></td><td class="column-17"></td>
</tr>
</tbody>
</table>

从下到上垂直对齐文本

Vertically align text from bottom to top

html

css

html-table

vertical-alignment