Bagaimana untuk Membuat Jadual HTML Menegak dengan CSS dan AngularJS?

Jadual HTML Menegak

Mencipta jadual HTML dengan baris menegak menawarkan cara unik untuk memaparkan data, dengan pengepala baris diletakkan pada sebelah kiri dan bukannya atas. Untuk mencapai matlamat ini, penggayaan CSS boleh digunakan untuk mengubah struktur jadual.

Penggayaan CSS

Untuk menjadikan baris jadual sebagai lajur menegak, peraturan CSS berikut boleh digunakan:

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

th, td {
  display: block;
}</code>

Ini akan menyebabkan sel jadual mengalir secara menegak, dengan pengepala yang sepadan muncul di sebelah kiri setiap baris.

Integrasi AngularJS

Mengekalkan akses kepada baris jadual, kini dipaparkan sebagai lajur, boleh dicapai dengan memasukkan peraturan CSS berikut:

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

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

Peraturan ini memastikan bahawa sempadan antara sel jadual dipaparkan hanya pada tepi, memberikan perbezaan yang jelas antara baris. Dengan menggunakan teknik ini bersama-sama dengan AngularJS, anda boleh memanipulasi data jadual secara dinamik sambil mengekalkan orientasi menegak.

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