表のセル内でテキストを左に90度回転し、テキストの長さに基づいてセルのサイズを調整する方法-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-29 17:21:02

オリジナル

408 人が閲覧しました

How to Rotate Text 90 Degrees Left in a Table Cell and Adjust Cell Size Based on Text Length?

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>

ログイン後にコピー

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