0

我正在尝试将文本放在表格的左侧。文本被旋转，使其看起来像是位于表格的左侧。我的 css 工作正常，但是当试图将它放在我的桌子旁边时，它会中断并且文本飞过页面。我不确定如何实现这一目标。目前我正在使用这个小提琴进行测试。

<body>
<label class="rotate"><small>Live Updating!</small></label>
<table>
    <tr id="teamnames">
        <td>Test</td>
    </tr>
    <tr id="teamscores">
        <td>0</td>
    </tr>
</table>

http://jsfiddle.net/kingdamian42/b4EzJ/

4

1 回答 1

1

也许您可以使用标签标题而不是标签。

对于您的转换，您缺少 transform-origin 来帮助您。

对于 IE <9，您也可以使用写作模式。

这是一个代码编辑器中的测试，它也适用于真正的 IE8。

http://liveweave.com/HYqDqn 

caption {
  -webkit-transform:  rotate(90deg);
  -webkit-transform-origin:top left;
  -moz-transform:  rotate(90deg);
  -moz-transform-origin:top left;
  -o-transform:  rotate(90deg);
  -o-transform-origin:top left;
  -ms-transform:  rotate(90deg);
  -ms-transform-origin:top left;
  transform:  rotate(90deg);
  transform-origin:top left;
}

IE 抄送

   caption {
      writing-mode:tb-lr;
      margin-left:-1em;
      width:100%;
      white-space:nowrap;
      text-indent:2em;
    }

要测试的完整页面 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Liveweave</title>    
    <!-- Place cursor after this and select a
JavaScript library from the menu above -->



  <!-- Supports context-sensitive CSS3 auto-completion -->
  <!-- Style starts here. Try adding new CSS tags. -->
  <style type="text/css">    


    table, td {
      border:solid;
      width:500px;
      height:200px;
      margin:auto;

    }
    caption {
      -webkit-transform:  rotate(90deg);
      -webkit-transform-origin:top left;
      -moz-transform:  rotate(90deg);
      -moz-transform-origin:top left;
      -o-transform:  rotate(90deg);
      -o-transform-origin:top left;
      -ms-transform:  rotate(90deg);
      -ms-transform-origin:top left;
      transform:  rotate(90deg);
      transform-origin:top left;

    }

  </style>
  <!--[if lte IE 9]>
  <style>
    caption {
      writing-mode:tb-lr;
      margin-left:-1em;
      width:100%;
      white-space:nowrap;
      text-indent:2em;
    }
  </style>
  <![endif]-->
  <!-- Style ends here -->

</head>  

<body>
<table>
  <caption class="rotate"><small>Live Updating!</small></caption>
    <tr id="teamnames">
        <td>Test</td>
    </tr>
    <tr id="teamscores">
        <td>0</td>
    </tr>
</table>
</body>
</html>
于 2013-06-14T01:52:45.630 回答