如何在表格td内旋转文本？

Question

我一直在搜索和玩弄转换：css的rotate（）几个小时，但未能得到我想要的结果。 我检查这些链接1 ， 2 ， 3等等。

其他的标题我不能使它与其他单元格一起使用，当使用空格时，列的宽度会扩展：no-wrap，没有它，文本文件将一个接一个地垂直向上。 下面的图片应该清楚地解释我打算做什么。

这就是我所拥有的：

  table { border: 1px solid #000; border-collapse: collapse; } table td { border: 1px solid #000; } .rotate { white-space:nowrap; -webkit-transform: rotate(-90deg); -webkit-transform-origin: 10px; -moz-transform: rotate(-90deg); -moz-transform-origin: 10px; -ms-transform: rotate(-90deg); -ms-transform-origin: 10px; -o-transform: rotate(-90deg); -o-transform-origin: 10px; transform: rotate(-90deg); transform-origin: 10px; } 

  <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

有一个名为writing-mode的CSS属性接受这三个值中的一个; 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;
    }

演示： -

 table { border: 1px solid #000; border-collapse: collapse; } table td { border: 1px solid #000; padding: 12px; } .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>