Можно ли гарантировать вертикальный текст в заголовке таблицы? - PullRequest
Новая
       50

Можно ли гарантировать вертикальный текст в заголовке таблицы?

0 голосов
/ 10 февраля 2019

Год 2019, разве по-прежнему невозможно сделать вертикальный текст в заголовке HTML-таблицы без каких-либо хитростей и обходных путей?

Я пытался 

table th.vertical {
  text-align: center;
  white-space: nowrap;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

table th.vertical:before {
  content: '';
  padding-top: 110%;
  /* takes width as reference, + 10% for faking some extra padding */
  display: inline-block;
  vertical-align: middle;
}
<table>
  <tbody>
    <tr>
      <th class="vertical">&nbsp;</th>
      <th class="vertical">&nbsp;</th>
      <th class="vertical">2016/02/28-21:40</th>
      <th class="vertical">2016/05/10-08:20</th>
      <th class="vertical">&nbsp;</th>
    </tr>
    <tr>
      <th class="vertical">&nbsp;</th>
      <th class="vertical">&nbsp;</th>
      <th class="vertical">2016/03/02-07:00</th>
      <th class="vertical">2016/05/12-20:30</th>
      <th class="vertical">&nbsp;</th>
    </tr>
    <tr>
      <th>28/02/2016-00:00</th>
      <th>29/02/2016-00:00</th>
      <td class="tp">tp</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>10/05/2016-00:00</th>
      <th>11/05/2016-00:00</th>
      <td>&nbsp;</td>
      <td class="tp">tp</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>09/06/2016-00:00</th>
      <th>10/06/2016-00:00</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="fn">fn</td>
    </tr>
    <tr>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

и получено

enter image description here

1) Фон смещен

2) Горизонтальная ширина не сужена

3) Пустые ячейки являются выбросами

4) Шрифты повреждены

Существует ли гарантированный способ получить нормальную, хорошо себя зарекомендовавшую себя вертикальнуютекст для современных браузеров?

1 Ответ

0 голосов
/ 10 февраля 2019

writing-mode помогает здесь, но вам нужно обернуть текст в th в span или div. Поддержка кажется довольно приличной в 2019 году: -) 

td, th {border: 1px solid black; background-color: #fee}
table{border-collapse: collapse;}
table th.vertical span {
  text-align:center;
  white-space:nowrap;
  
  
  -ms-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
            }
<table>
   <tbody><tr>
      <th class="vertical">&nbsp;</th>
      <th class="vertical">&nbsp;</th>
     <th class="vertical"><span>2016/02/28-21:40</span></th>
      <th class="vertical"><span>2016/05/10-08:20</span></th>
      <th class="vertical">&nbsp;</th>
   </tr>
   <tr>
      <th class="vertical">&nbsp;</th>
      <th class="vertical">&nbsp;</th>
      <th class="vertical"><span>2016/03/02-07:00</span></th>
      <th class="vertical"><span>2016/05/12-20:30</span></th>
      <th class="vertical">&nbsp;</th>
   </tr>
   <tr>
      <th>28/02/2016-00:00</th>
      <th>29/02/2016-00:00</th>
      <td class="tp">tp</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <th>10/05/2016-00:00</th>
      <th>11/05/2016-00:00</th>
      <td>&nbsp;</td>
      <td class="tp">tp</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <th>09/06/2016-00:00</th>
      <th>10/06/2016-00:00</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="fn">fn</td>
   </tr>
   <tr>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
</tbody></table>
...