HTML で CSS を使用して垂直の表ヘッダーを作成する方法?

HTML の垂直テーブル ヘッダー

標準の HTML テーブルでは、行は水平に表示され、テーブル ヘッダーが上部に配置されます。ただし、垂直の行と左側にヘッダーを備えた表を作成したい場合があります。

これを実現するには、CSS を利用して行と表のセルの表示を変更します。簡単な CSS 修正は次のようになります。

<code class="css">tr { display: block; float: left; }
th, td { display: block; }</code>

この CSS コードは、各行をブロック要素として表示し、左にフロートさせて、効果的に垂直行を作成します。表示: ブロック;表のセルを設定すると、縦の行内のブロックとしても表示されます。

この CSS ソリューションは、表のセルが単一行であることを前提としていることに注意してください。複数行のセルがある場合、表の動作が崩れる可能性があります。

表示を改善するには、追加の CSS ルールを追加して枠線を管理し、不要な枠線を削除できます。

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }</code>

この CSS を使用すると、視覚的に魅力的であり、 を介してアクセス可能な行の機能を維持できる、垂直方向の行を含むテーブルを作成できます。タグ。

以上がHTML で CSS を使用して垂直の表ヘッダーを作成する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。