在 table 中旋转具有背景颜色的文本

Question

如何旋转带有背景颜色的 table 中的文本，使其填充整个单元格而不仅仅是文本？

css

.rotate {
  -moz-transform: rotate(-90.0deg);
  /* FF3.5+ */
  -o-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* IE8 */
  background-color: yellow;
}

html

<TABLE CELLPADDING=5 CELLSPACING=0>
  <TR>
    <TH>Operator</TH>
    <TH>Ext</TH>
    <TH>City</TH>
  </TR>
  <TR>
    <TD class="rotate">Starflower</TD>
    <TD>8172</TD>
    <TD>San Francisco</TD>
  </TR>
  <TR>
    <TD class="rotate">Melody</TD>
    <TD>5673</TD>
    <TD>San Pedro</TD>
  </TR>
  <TR>
    <TD class="rotate">Symphony</TD>
    <TD>3820</TD>
    <TD>Montreal</TD>
  </TR>
</TABLE>

jsfiddle-link

Answer 1

正如我在评论中提到的，您正在旋转整个单元格，并且黄色背景覆盖了单元格。因此，它正在按预期工作。使用您的代码，查看边界在哪里：

td {
  border: 1px solid #000;
}

.rotate {
  -moz-transform: rotate(-90.0deg);
  /* FF3.5+ */
  -o-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* IE8 */
  background-color: yellow;
}

<TABLE CELLPADDING=5 CELLSPACING=0>
  <TR>
    <TH>Operator</TH>
    <TH>Ext</TH>
    <TH>City</TH>
  </TR>
  <TR>
    <TD class="rotate">Starflower</TD>
    <TD>8172</TD>
    <TD>San Francisco</TD>
  </TR>
  <TR>
    <TD class="rotate">Melody</TD>
    <TD>5673</TD>
    <TD>San Pedro</TD>
  </TR>
  <TR>
    <TD class="rotate">Symphony</TD>
    <TD>3820</TD>
    <TD>Montreal</TD>
  </TR>
</TABLE>

然而，你所追求的可能是这样的。再次，查看实际单元格边框的位置。

td {
  border: 1px solid #000;
}

.rotate {
  background-color: yellow;
}

.rotate > div {
  transform:
    translateX(45%)
    rotate(-90deg);
  height: 80px;
  text-align: center;
}

<TABLE CELLPADDING=5 CELLSPACING=0>
  <TR>
    <TH>Operator</TH>
    <TH>Ext</TH>
    <TH>City</TH>
  </TR>
  <TR>
    <TD class="rotate">
      <div>Starflower</div>
    </TD>
    <TD>8172</TD>
    <TD>San Francisco</TD>
  </TR>
  <TR>
    <TD class="rotate">
      <div>Melody</div>
    </TD>
    <TD>5673</TD>
    <TD>San Pedro</TD>
  </TR>
  <TR>
    <TD class="rotate">
      <div>Symphony</div>
    </TD>
    <TD>3820</TD>
    <TD>Montreal</TD>
  </TR>
</TABLE>

在 table 中旋转具有背景颜色的文本

Rotating a text with a background color in a table

css

html-table

transform

rotation