Поворот текста в таблице не работает на Firefox и Chrome - PullRequest
0 голосов
/ 18 апреля 2020

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

есть мой код:

<head>
        <style>
            #customers {
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              border-collapse: collapse;
              width: 50%;
            }

            #customers td, #customers th {
              border: 1px solid #ddd;
              padding: 8px;
            }

            #customers tr:nth-child(even){background-color: #f2f2f2;}

            #customers tr:hover {background-color: #ddd;}

            #customers th {
              padding-top: 12px;
              padding-bottom: 12px;
              text-align: left;
              background-color: #4CAF50;
              color: white;
              height:130;
            }

            .text-rotation {              
                transform:rotate(-65deg);
                -ms-transform:rotate(-65deg); /* IE 9 */
                -moz-transform:rotate(-65deg); /* Firefox */
                -webkit-transform:rotate(-65deg); /* Safari and Chrome */
                -o-transform:rotate(-65deg); /* Opera */
            }
        </style>
</head>
<body>
        <br><br><br>
        <div><h3>Rotate Text</h3></div>
        <div>
            <table id='customers'>
                <tr class="text-rotation">
                    <td>Week Number</td>
                    <td class=" text-rotation">Start Date</td>
                    <td class=" text-rotation">Chilliwack</td>
                    <td class=" text-rotation">Fort St. John</td>
                    <td class=" text-rotation">Kamloops</td>
                <tr class="talgnC">
                    <td>1</td>
                    <td>07 Jan 2019</td>
                    <td>1</td><td>2</td><td>3</td> 
                </tr>
                <tr class="talgnC">
                    <td>2</td>
                    <td>14 Jan 2019</td>
                    <td>1</td><td>2</td><td>3</td> 
                </tr>
   </div>
</body>

Есть таблица в Chrome Версия 81.0.4044.113 Show in the Chrome

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...