Как повернуть текст налево на 90 градусов, а размер ячейки настраивается в соответствии с текстом в html

Ответ 1

Это можно сделать, применив CSS-поворот к внутреннему элементу, а затем отрегулировав высоту элемента в соответствии с его шириной, так как элемент был повернут, чтобы поместить его в <td>.

Также убедитесь, что вы изменили свой id #rotate на класс, поскольку у вас несколько.

$(document).ready(function() {
  $('.rotate').css('height', $('.rotate').width());
});

td {
  border-collapse: collapse;
  border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
  visibility: hidden;
}
.rotate {
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>
      <div class='rotate'>10kg</div>
    </td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>20kg</div>
    </td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>30kg</div>
    </td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
  </tr>


</table>

Ответ 2

Даниэль Иммс отлично подходит для применения вращения CSS к внутреннему элементу. Тем не менее, можно достичь конечной цели таким образом, чтобы не требовал JavaScript и работал с более длинными строками текста.

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

Используя класс ".rotate" в родительском теге TD, мы можем не только вращать внутренний DIV, но также можем установить несколько свойств CSS в родительском теге TD, который заставит весь текст оставаться на одну строку и сохранить ширину до 1.5em. Затем мы можем использовать некоторые отрицательные поля на внутреннем DIV, чтобы убедиться, что он хорошо центрируется.

td {
    border: 1px black solid;
    padding: 5px;
}
.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}
.rotate div {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
         margin-left: -10em;
         margin-right: -10em;
}

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td class='rotate' rowspan="4"><div>10 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
    <tr>
        <td class='rotate' rowspan="4"><div>20 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
    <tr>
        <td class='rotate' rowspan="4"><div>30 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
</table>

Ответ 3

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

Итак, имея в виду это, посмотрите на эту ссылку для более чистого способа, который не имеет проблем с переполнением ширины. В конце концов это сработало для меня и было очень легко реализовать.

https://css-tricks.com/rotated-table-column-headers/

Ответ 4

Без расчета высоты. Строгий CSS и HTML. <span/> только для Chrome, потому что хром не может изменить направление текста для <th/>.

HTML:

<table>
   <tr>
      <th><span>Rotated text by 90 deg.</span></th>
   </tr>
</table>

CSS

th
{
   vertical-align:bottom;
   text-align:center;
}
th span
{
   -ms-writing-mode: tb-rl;
   -webkit-writing-mode:vertical-rl;
   writing-mode: vertical-rl;
   transform:rotate(180deg);
   white-space: nowrap;
}