表のセル内でテキストを左に90度回転し、テキストの長さに基づいてセルのサイズを調整する方法

HTML のテキストに従ってテキストを 90 度回転し、セル サイズを調整する方法

CSS 変換を使用してテキスト セルを左に 90 度回転すると、次のことが可能になります。位置ずれや書式の乱れなどの課題があります。これらの問題に対処するには、テキストの長さに基づいてセル サイズを動的に調整する厳密な CSS および HTML ソリューションを実装できます。

HTML コードでは、 を使用します。回転したいテキストを含む要素を追加します:

<code class="html"><table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id='rotate'><span>10kg</span></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id='rotate'><span>20kg</span></td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id='rotate'><span>30kg</span></td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
</table></code>

次に、CSS スタイルを適用してテキストを回転し、それに応じてセル サイズを調整します:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

その仕組みは次のとおりです。 :

• 番目のルールは、セルの垂直方向の配置を下に設定し、テキストの配置を中央に設定します。
• 番目のスパン ルールは、テキストに縦書きモードを適用し、反転します。

CSS 書き込みモードの機能を利用することで、テキストの長さに基づいてセル サイズを動的に調整し、テキストが妥協することなく正しく回転されるようにすることができます。テーブルのレイアウト。この方法は、列内でテキストの長さが大幅に異なるシナリオに特に役立ちます。

以上が表のセル内でテキストを左に90度回転し、テキストの長さに基づいてセルのサイズを調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。