0

テーブルの左側にテキストを配置しようとしています。テーブルの左側に置かれているように見えるように、テキストが回転されます。css は正しく機能していますが、テーブルの横に配置しようとすると、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 の CC

   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 に答える