列ベースの表示で垂直方向に整列した HTML テーブルを作成するにはどうすればよいですか?

垂直に配置された HTML テーブル: 列ベースの表示の実現

行が左側にテーブル ヘッダーを付けて垂直に表示される垂直テーブルには、HTML 特有の課題があります。 CSS を使用したこの問題の簡単な解決策は次のとおりです。

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

このアプローチでは、表のセルの方向を効果的に反転し、 を使用してセルにアクセスできるようにします。通常のテーブルと同じように。ただし、このメソッドは各セルを単一行として扱い、rowspan やcolspan などのテーブルのような動作を削除することに注意することが重要です。

例:

Toこれを説明するために、提案された CSS でマークアップされた次の HTML テーブルを考えてみましょう:

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

結果は、2 つの「行」(列として表されます) と 2 つの「列」(列として表されます) を含む垂直方向に整列したテーブルになります。

追加の考慮事項:

適切な境界線のレンダリングを確保するには、次の CSS を追加できます:

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

これにより、各行 (列) の最初のセルを除くすべてのセルの上と左の境界線を削除し、効果的に境界のない外観を作成します。

以上が列ベースの表示で垂直方向に整列した HTML テーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。