4

У меня есть таблица с длинными заголовками.

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

Лучшее, что я смог придумать, - добавить translateY(-100%) к свойству transform.

Мне удалось разместить текст так, как я хотел,- чтобы он находился внизу ячейки таблицы, но теперь я не могу понять, как переместить все это обратно вниз, чтобы выровнять его должным образом.

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>

На основе вопроса участника @dotwongdotcom.

1

2 ответа 2

4

Я использовал transform-origin: center в вашем css и надеюсь, что это то, что вам нужно:

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>

На основе ответа участника @enxaneta.

4
  • Поймал ^^ Я прошу вас: 1). Научитесь проверять кроссбраузерность, иначе ваши примеры могут принести много вреда для неискушенных в вёрстке читателей. 2). Вы действительно думаете, что стоит приводить пример, который некорректно отображается на MacOS и iOS? о, я прошу вас, проверяйте чужой код, а не просто слепо на него ссылайтесь. На Mac в Safari: bit.ly/2LCyiXC (проверено в Safari на Mojave и High Sierra), тоже и в iOS, проверено в Safari на iPad и iPhone. Держите два справедливых минуса, и за вопрос и за ответ, за то, что решили устроить вопрос-ответ и допустили столь грубые ошибки. 28 дек 2018 в 18:43
  • @AlexandrKazakov, у меня на винде в FF 64.0 выглядит так же, как на твоём скриншоте из сафари. А вообще, надо просто достаточную ширину колонок обеспечить и всё станет нормально.
    – Qwertiy
    29 дек 2018 в 9:52
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Qwertiy
    29 дек 2018 в 11:27
  • @Alexandr_TT, кажется, я поторопился про ширину. Хром ведь нормально высчитывает ширину, а в FF косяк. Возможно, надо ещё каких-то свойств добавить, чтобы стало правильно.
    – Qwertiy
    29 дек 2018 в 13:18
3

Для браузеров, которые не поддерживают writing-mode, но поддерживают трансформации, можно сделать через поворот квадратных блоков. Только обращаю внимание, что ширину заголовков и переносы строк в них надо задавать явно (в примере 1 строка и ширина 1.5em). Вертикальным выравниванием текста заголовков можно управлять через vertical-align на 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.