Выровнять текст по вертикали снизу вверх - PullRequest
Новая
       20

Выровнять текст по вертикали снизу вверх

0 голосов
/ 17 сентября 2018

У меня есть таблица с длинными заголовками.Я пытаюсь повернуть текст так, чтобы он проходил от нижней части ячейки к вершине.Я пробовал комбинацию режима письма: vertical-rl;и преобразовать: повернуть (-180 градусов) ;.

Лучшее, что я могу придумать, это добавить translateY (-100%) к свойству transform.Это позволяет выстроить текст так, как я хотел бы, чтобы он находился внизу ячейки таблицы, но теперь я не могу понять, как переместить все это обратно вниз, чтобы выровнять должным образом.

Вотстраница, над которой я работаю.Прокрутите вниз, чтобы увидеть стол.

Я вырывал свои волосы весь день.Любые идеи будут высоко оценены.

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

1 Ответ

0 голосов
/ 17 сентября 2018

Я добавил transform-origin: center center; в вашем CSS. Я надеюсь, что это то, что вам нужно. 

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>
($10,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>
($4,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>
($1,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>
($690-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>
($490-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>
($390-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>
...