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

Предположим, у меня есть таблица с некоторыми строками и столбцами,поэтому я хочу повернуть текст в ячейках что-то вроде этого
:
enter image description here



проблема заключается в том, когда я поворачиваю текст с помощью стиля:



#rotate {

     -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 */


все это перепутать, как это



HTML-код:



<table cellpadding="0" cellspacing="0" align="center">

    <tr>

        <td id='rotate'>10kg</td>

        <td >B</td>

        <td >C</td>

        <td>D</td>

        <td>E</td>

    </tr>

    <tr>

        <td id='rotate'>20kg</td>

        <td>G</td>

        <td>H</td>

        <td>I</td>

        <td>J</td>

    </tr>

    <tr>

        <td id='rotate'>30kg</td>

        <td>L</td>

        <td>M</td>

        <td>N</td>

        <td>O</td>

    </tr>





</table>


css:



<style type="text/css">

td {

    border-collapse:collapse;

    border: 1px black solid;

}

tr:nth-of-type(5) td:nth-of-type(1) {

    visibility: hidden;

}

#rotate {

     -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 */

}

</style>
3211   4  

4 ответов:

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

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

A 4x3 table with the headers in the first column rotated by 90 degrees

$(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>

JavaScript

эквивалент выше в чистом JavaScript является следующим следует:

jsFiddle

window.addEventListener('load', function () {
    var rotates = document.getElementsByClassName('rotate');
    for (var i = 0; i < rotates.length; i++) {
        rotates[i].style.height = rotates[i].offsetWidth + 'px';
    }
});
52  
2015-06-02 00:55:40

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

enter image description here

С помощью ".поверните " класс на родительском теге TD, мы можем не только повернуть внутренний DIV, но мы также можем установить несколько свойств CSS на родительском теге TD, которые заставят весь текст оставаться на одной строке и сохранить ширину до 1,5 em. Затем мы можем использовать некоторые отрицательные поля на внутреннем 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>

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

получайте удовольствие, играя вокруг с этим на jsFiddle.

26  
2017-05-23 14:47:20

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

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;
}
<table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table>
13  
2018-02-01 14:31:28

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

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

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

1  
2017-02-05 08:49:51

Comments

    Ничего не найдено.
Click here to cancel reply.