如何在表 td 内旋转文本而不是在表 th 上？答案

【问题标题】：How can I rotate text inside table td not on table th?如何在表 td 内旋转文本而不是在表 th 上？
【发布时间】：2015-11-25 09:52:43
【问题描述】：

我一直在搜索和玩转 css 的 transform: rotate() 几个小时，但未能得到我想要的结果。我检查了这些链接1、2、3 等等。

除了标题我无法使其与其他单元格一起使用之外，列的宽度在使用空格时会扩展：不换行，没有它，文本文件一个接一个地垂直向上。下面的图片应该清楚地说明我打算做什么。

这是我所拥有的：

		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>

【问题讨论】：

您可以在 .rotate 上使用静态高度，也可以使用 javascript：获取文本的宽度并应用高度值。

标签： html css css-transforms

【解决方案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/

【讨论】：

【解决方案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>

希望这会对你有所帮助.. ！

【讨论】：

【解决方案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>

【讨论】：