我一直在搜索和玩弄 transform: rotate() of css 几个小时,但未能获得我想要的结果。我检查了这些链接 1 , 2 , 3等等。
除了标题我不能让它与其他单元格一起工作,当使用 whitespace: 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>
最佳答案
有一个名为 writing-mode
的 CSS 属性接受这三个值之一; horizontal-tb
、vertical-rl
和 vertical-lr
。
horizontal-tb
是默认设置,它会导致元素中出现典型的从左到右的水平文本流。
然而,vertical-*
值用于垂直 block 流,导致浏览器从上到下写入文本。在 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>
关于html - 如何在表 td 内而不是在表 th 上旋转文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33913304/