HTML Стол с вертикально повернутыми заголовками на левой стороне - PullRequest
Новая
       25

HTML Стол с вертикально повернутыми заголовками на левой стороне

0 голосов
/ 27 февраля 2020

Я пытаюсь создать таблицу html для заполнения некоторыми данными, которые выглядят как на рисунке ниже. Я могу повернуть текст с помощью простого css, но не могу понять, как организовать подстроки / столбцы. Возможно ли это с таблицами html / css или хотя бы с сеткой?

really ugly table with headers rotated on the side

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Я смог решить эту проблему, рассматривая каждый тег как отдельную строку и создавая для них данные по отдельности. 

    <table>
    <tr>
      <td rowspan="4" class="rotate">Header Text</td>
      <td class="rotate pole">SubHeader Text 1</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>

      <td class="rotate pole">SubHeader Text 2</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 3</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 4</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
  </table>
1 голос
/ 27 февраля 2020

Вы можете использовать простую таблицу и свойство CSS: transform: rotate(), см .: 

table {
  margin-top: 50px;
}

.rotate {
  transform: rotate(-90deg)
}
<table>
  <tr>
    <td class="rotate" rowspan="2">
      Rotated cell
    </td>
    <td>
      Normal cell
    </td>
  </tr>
  <tr>
    <td>
      Normal cell
    </td>
  </tr>
<table>
...