Bagaimana untuk Mencipta Jadual HTML Jajaran Menegak dengan Paparan Berasaskan Lajur?

Jadual HTML Dijajar Menegak: Mencapai Paparan Berasaskan Lajur

Jadual menegak, tempat baris dipaparkan secara menegak dengan pengepala jadual di sebelah kiri, memberikan cabaran unik dalam HTML. Berikut ialah penyelesaian mudah untuk isu ini, menggunakan CSS:

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

Pendekatan ini secara berkesan membalikkan orientasi sel jadual, membolehkan anda mengaksesnya menggunakan sama seperti yang anda lakukan di meja biasa. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa kaedah ini menganggap setiap sel sebagai satu baris, melepaskan sebarang gelagat seperti jadual seperti rowspan atau colspan.

Contoh:

Kepada menggambarkan ini, pertimbangkan jadual HTML berikut yang ditandakan dengan CSS yang dicadangkan:

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

Hasilnya ialah jadual yang dijajarkan secara menegak dengan dua "baris" (diwakili sebagai lajur) dan dua "lajur" (diwakili sebagai baris).

Pertimbangan Tambahan:

Untuk memastikan pemaparan sempadan yang betul, anda boleh menambah CSS berikut:

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

Ini akan mengalih keluar sempadan atas dan kiri daripada semua sel kecuali yang pertama dalam setiap baris (lajur), dengan berkesan mencipta rupa tanpa sempadan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual HTML Jajaran Menegak dengan Paparan Berasaskan Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!