4

この質問はたくさん聞かれていることを私は知っていると言って序文を述べさせてください、しかし答えのどれも私のために働きませんでした。

ほとんどのソリューションでは、の使用が指示transform:rotate(270deg);されていますが、回転を考慮しない方法でブロックが生成され、ブロックが必要以上に広くなるため、これは幅を混乱させます。

私の目標は、次のようなものを（表で）取得することです。

望ましい結果

運が良ければ、さまざまなCSSプロパティを試してみました。これが私が取り組んできた基本的なサンドボックスであり、私が経験している問題のいくつかを示しています。

4

4 に答える 4

4

次のthように変更します。

<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column 1</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Col 2</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column Two</div>
        </div>
    </div>
</th>

そして、フィドルで提供されているCSSを追加すると、目的の結果が得られることを願っています。

フィドル

于 2012-12-30T12:44:30.463 に答える
2

JSFiddleがダウンしているように見えるので、コードが表示されません。ただし、変換transform-originに加えて含める必要があるかもしれません。rotateこれが私の言いたいことのデモです：http：//jsbin.com/isinoh/2/edit

于 2012-12-30T00:01:36.350 に答える
0

canvasテキストを手動でレンダリングできる要素を使用できます。その場合、要素の幅と高さも手動で調整する必要があります。

于 2012-12-29T23:12:57.537 に答える
0

ここで最も難しいのは、縦書きのテキストと表の書式を組み合わせることです。Cf. CSSクロスブラウザを使用して垂直方向のテキストを描画するにはどうすればよいですか？配置（回転されたコンテンツをセルから取り出して、回転されていない寸法がテーブルの書式設定を台無しにしないため）が必要であり、テーブルセルが必要ないため、各ヘッダーセルの2つのレベルで追加のマークアップが必要になる場合があります。配置するとうまく動作します。

例：

<!doctype html>
<style>
* { line-height: 1.3 }
table { border-collapse: collapse }
td, th
{
    border: 1px solid black;
    white-space: nowrap;
}
#title th
{
    width: 15px;
    height: 100px;
    vertical-align: bottom;
    font-weight: normal;
}
#title th > div {
   position: relative; 
}
#title th > div > div {
   position: absolute; 
   bottom: 0;
   -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
   -webkit-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   transform-origin: 0 100%;
   left: 1.1em;
}
</style>
<table>
    <tr id="title">
        <th>&nbsp;</th>
        <th><div><div>Column 1</div></div></th>
        <th><div><div>Column 2</div></div></th>
        <th><div><div>Column 3</div></div></th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
     <tr>
        <td>Row 2</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

フォントレンダリングの問題が原因で回転したテキストが適切に描画されないため、多くのシステムでは結果があまりきれいになりません（通常の水平方向のテキストを記述していない場合、ヒントは役に立ちません）。

于 2012-12-30T09:17:25.400 に答える