Bagaimana untuk Membuat Pengepala Jadual Menegak dengan CSS dalam HTML?

Pengepala Jadual Menegak dalam HTML

Dalam jadual HTML standard, baris dipaparkan secara mendatar, dengan pengepala jadual terletak di bahagian atas. Walau bagaimanapun, terdapat situasi di mana anda mungkin ingin membuat jadual dengan baris menegak dan pengepala di sebelah kiri.

Untuk mencapai matlamat ini, anda boleh memanfaatkan CSS untuk mengubah suai paparan baris dan sel jadual. Pembetulan CSS mudah ialah:

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

Kod CSS ini memaksa setiap baris untuk dipaparkan sebagai elemen blok dan terapung ke kiri, dengan berkesan mencipta baris menegak. Paparan: blok; tetapan pada sel jadual memastikan ia turut dipaparkan sebagai blok dalam baris menegak.

Perhatikan bahawa penyelesaian CSS ini menganggap bahawa sel jadual anda adalah satu baris. Jika anda mempunyai sel berbilang baris, tingkah laku jadual mungkin rosak.

Untuk mempertingkatkan paparan, anda boleh menambah peraturan CSS tambahan untuk mengurus sempadan dan mengalih keluar sempadan yang tidak diperlukan:

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

Dengan CSS ini, anda boleh membuat jadual dengan baris menegak yang kedua-duanya menarik secara visual dan mengekalkan kefungsian baris yang boleh diakses melalui tanda nama.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pengepala Jadual Menegak dengan CSS dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!