Вертикальное выравнивание и расположение повернутого текста в таблице или сетке - PullRequest
Новая
       19

Вертикальное выравнивание и расположение повернутого текста в таблице или сетке

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

Я пытаюсь повернуть некоторый текст в html-таблице, но независимо от того, что я делаю, у меня возникают проблемы с выравниванием и потоком текста.

Я пытался использовать различные комбинации написаниярежим и поверните в css, но не можете решить проблему.Вот тестовая таблица: https://universaltheosophy.com/hpb/test-table.htm

Вот код: 

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
<table cellpadding="2" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
    </td>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png"></p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

Проблема в основном в двух местах:

  1. повернутый текст неправильно выравнивается в верхней части инижняя граница таблицы тд элемента.Либо текст выходит за пределы границы td, либо он сдавливается вместе (когда вы запускаете здесь фрагмент кода, посмотрите разницу между обычным представлением и полным просмотром страницы)

  2. текствыравнивается горизонтально далеко от изображения в центре (я хочу, чтобы повернутый текст с обеих сторон изображения в центре был плотно прилегающим к нему).

Редактировать

Чтобы обратиться к первому комментарию здесь (re: rowspans), вот та же таблица без интервалов row, с тем же результатом: 

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
<table cellpadding="5" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png" class="img1"></p>
    </td>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

1 Ответ

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

У меня есть другое решение вашей проблемы с использованием CSS grid layout:

  1. Обратите внимание на изменение разметки без использования таблиц.Создайте макет сетки , используя display: grid - обратите внимание, что &nbsp в разметке предназначен для пустого элемента сетки.
  2. Создайте макет из трех столбцов сmin-content ширина с использованием grid-template-columns: repeat(3, min-content) на внешнем контейнере.
  3. Установите второй ряд по высоте среднего элемента, используя grid-template-rows: 1fr min-content

  4. Для вертикального выравнивания IЯ использую writing-mode: 

    .wmode {
   writing-mode: tb-rl;
   transform: rotate(-180deg);
}

См. демонстрацию ниже: 

.container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows: 1fr min-content;
  justify-content: center;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.wmode {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}
<div class="container">
  &nbsp;
  <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
  &nbsp;
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
  <img src="https://via.placeholder.com/400x338?text=image">
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
  &nbsp;
  <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
  &nbsp;
</div>
...