Как я могу повернуть текст внутри таблицы td не на таблицу th?

Question

Я искал и работал с transform: rotate() из css в течение нескольких часов, но не смог получить результат, который я хотел. Я проверил на этих ссылках 1, 2, 3 и больше.

Другое, что заголовок не может заставить его работать с другими ячейками, ширина столбца расширяется при использовании пробелов: no-wrap и без него текстовые файлы вертикально расположены один за другим. На изображении ниже должно быть понятно, что я намереваюсь сделать.

Вот что у меня есть:

\t \t table { 
 
\t \t \t border: 1px solid #000; 
 
\t \t \t border-collapse: collapse; 
 
\t \t } 
 

 
\t \t table td { 
 
\t \t \t border: 1px solid #000; 
 
\t \t } 
 

 
\t \t .rotate { 
 
\t \t \t white-space:nowrap; 
 
\t \t  -webkit-transform: rotate(-90deg); 
 
\t \t  -webkit-transform-origin: 10px; 
 
\t \t  -moz-transform: rotate(-90deg); 
 
\t \t  -moz-transform-origin: 10px; 
 
\t \t  -ms-transform: rotate(-90deg); 
 
\t \t  -ms-transform-origin: 10px; 
 
\t \t  -o-transform: rotate(-90deg); 
 
\t \t  -o-transform-origin: 10px; 
 
\t \t  transform: rotate(-90deg); 
 
\t \t  transform-origin: 10px; 
 
\t \t }

<table> 
 
     <tr> 
 
      <td colspan="2">HEADER</td> 
 
      <td>HEADER</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="4" class="rotate">QUITE LONG TEXT</td> 
 
      <td rowspan="2" class="rotate">TEST 1</td> 
 
      <td>TEXT</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TEXT</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="2" class="rotate">TEST 2</td> 
 
      <td>TEXT</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TEXT</td> 
 
     </tr> 
 
    </table>

Answer 1

Там есть атрибут CSS называется writing-mode, который принимает одно из этих трех значений; horizontal-tb, vertical-rl и vertical-lr.

horizontal-tb по умолчанию и вызывает типичный горизонтальный поток текста в элементе.

Значения vertical-*, однако, предназначены для вертикального потока блоков, в результате чего тексты будут отображаться сверху вниз браузерами. В vertical-rl новые строки добавляются слева от предыдущих и наоборот для vertical-lr.

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

div { 
 
    font-family: courier new; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 

 
table tr:not(:first-child) th { 
 
    display: inline-block; 
 
    -webkit-writing-mode: vertical-rl; 
 
    -ms-writing-mode: tb-rl; 
 
    writing-mode: vertical-rl; 
 
} 
 

 
th { 
 
    padding: 6px; 
 
} 
 

 
#writing-mode img { 
 
    width: 35px; 
 
} 
 

 
td { 
 
    width: 40px; 
 
    border: 1px dotted black; 
 
} 
 

 
tr:nth-child(2) th { 
 
    background: #69D2E7; 
 
} 
 

 
tr:nth-child(2) td { 
 
    background: #A7DBD8; 
 
} 
 

 
tr:nth-child(3) td { 
 
    background: #F1D4AF; 
 
} 
 

 
tr:nth-child(3) th { 
 
    background: #E08E79; 
 
} 
 

 
tr:nth-child(4) td { 
 
    background: #CFF09E; 
 
} 
 

 
tr:nth-child(4) th { 
 
    background: #79BD9A; 
 
} 
 

 
tr:nth-child(5) td { 
 
    background: #D5DED9; 
 
} 
 

 
tr:nth-child(5) th { 
 
    background: #99B2B7; 
 
} 
 

 
tr:nth-child(6) td { 
 
    background: #EBE3AA; 
 
} 
 

 
tr:nth-child(6) th { 
 
    background: #CAD7B2; 
 
} 
 

 
#browser-support { 
 
    background: ivory; 
 
    border-left: 6px skyblue solid; 
 
    font-family: courier new; 
 
    font-size: 14px; 
 
    margin: 12px 0; 
 
    padding: 6px; 
 
}

<div id="writing-mode"> 
 
    <h3>Time Table</h3> 
 
    <table> 
 
    <tr> 
 
     <th style="width:20px"> </th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Monday</th> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-chalkboard-64.png" alt=""></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-flask-128.png" alt=""></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
    </tr> 
 
    <tr> 
 
     <th>Tuesday</th> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-flask-128.png" alt=""></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt=""></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-globe-128.png" alt="" /></td> 
 
    </tr> 
 
    <tr> 
 
     <th>Wednesday</th> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt="" /></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt="" /></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
    </tr> 
 
    <tr> 
 
     <th>Thursday</th> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-chalkboard-64.png" alt=""></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
    </tr> 
 
    <tr> 
 
     <th>Friday</th> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-globe-128.png" alt="" /></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt="" /></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;></td> 
 
     <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-flask-128.png" alt=""></td> 
 
    </tr> 
 
    </table> 
 

 
</div>

от: http://www.hongkiat.com/blog/css-tricks-more/

Answer 2

Добавить padding недвижимость table>td и изменить .rotate атрибуты класса, как я делаю в CSS демо ниже.

table td { 
     border: 1px solid #000; 
     padding: 12px; 
    } 

Demo: -

table { 
 
\t \t \t border: 1px solid #000; 
 
\t \t \t border-collapse: collapse; 
 
\t \t } 
 

 
\t \t table td { 
 
\t \t \t border: 1px solid #000; 
 
      padding: 12px; 
 
     } 
 

 
\t \t .rotate { 
 
      white-space:nowrap; 
 
      -webkit-transform: rotate(270deg); 
 
      -moz-transform: rotate(270deg); 
 
      -o-transform: rotate(270deg); 
 
      writing-mode: lr-tb; 
 
      }

<table> 
 
     <tr> 
 
      <td colspan="2" style="text-align:center;">HEADER</td> 
 
      <td>HEADER</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="4" class="rotate">QUITE LONG TEXT</td> 
 
      <td rowspan="2" class="rotate">TEST 1</td> 
 
      <td>TEXT</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TEXT</td> 
 
     </tr> 
 
     <tr > 
 
      <td rowspan="2" class="rotate">TEST 2</td> 
 
      <td>TEXT</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TEXT</td> 
 
     </tr> 
 
    </table>

Надеется, что это поможет ..!

Answer 3

Спасибо Vinicius Santana за то, что указатель меня направил.

После некоторых проб и ошибок это то, с чем я столкнулся. Именно то, что я ищу, как описано из изображения, прикрепленного к этому вопросу.

КОД:

CSS:

<style type="text/css"> 
     table { 
     border: 1px solid #000; 
     border-collapse: collapse; 
    } 

    table td { 
     border: 1px solid #000; 
    } 

    .rotate { 
     -webkit-transform: rotate(-180deg);   
     -moz-transform: rotate(-180deg);    
     -ms-transform: rotate(-180deg);   
     -o-transform: rotate(-180deg);   
     transform: rotate(-180deg); 
     writing-mode: vertical-lr; 

    } 

HTML:

<table> 
     <tr> 
      <td colspan="2">HEADER</td> 
      <td>HEADER</td> 
     </tr> 
     <tr> 
      <td rowspan="4" class="rotate">QUITE LONG TEXT</td> 
      <td rowspan="2" class="rotate">TEST 1</td> 
      <td>TEXT</td> 
     </tr> 
     <tr> 
      <td>TEXT</td> 
     </tr> 
     <tr> 
      <td rowspan="2" class="rotate">TEST 2</td> 
      <td>TEXT</td> 
     </tr> 
     <tr> 
      <td>TEXT</td> 
     </tr> 
    </table>