CSS を使用して垂直の HTML テーブルを作成するには?

垂直 HTML テーブルの作成

HTML では、通常、テーブルは水平の行と垂直の列で表示されます。ただし、この方向を反転して、垂直の行と左側にテーブル ヘッダーを持つ「垂直」テーブルを作成するシナリオが発生する場合があります。

これを実現するには、次のような単純な CSS ソリューションを使用できます。

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

この CSS は、テーブル内の要素を再配置して、個々の行が互いに隣り合う垂直ブロックとして表示され、テーブルのヘッダー セルが左側に表示されます。

行へのアクセス垂直テーブル

CSS はテーブルの外観を変更しますが、HTML コード内の行へのアクセス方法には影響しません。

は引き続き使用できます。従来の水平テーブルの場合と同様に、データを動的に挿入するための要素です。

その他のスタイルに関する考慮事項

垂直テーブルの外観をさらに向上させるには、次のことを検討してください。 :

• border-collapse を使用して、隣接するセル間の境界線を削除します。
• の幅と高さのプロパティを調整します。そして/

  サンプル コード

  カスタマイズできる垂直 HTML テーブルの例を次に示します。

  <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>

  <code class="html"><table>
  <tr>
      <th>name</th>
      <th>number</th>
  </tr>
  <tr>
      <td>James Bond</td>
      <td>007</td>
  </tr>
  <tr>
      <td>Lucipher</td>
      <td>666</td>
  </tr>
  </table></code>

  これらの CSS スタイルを実装すると、従来のテーブルの機能とアクセシビリティを維持しながら、HTML で垂直テーブルを簡単に作成できます。

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