Panduan untuk melaksanakan susun atur jadual responsif menggunakan CSS

Panduan untuk melaksanakan susun atur jadual responsif menggunakan CSS

Pengenalan:
Dengan populariti peranti mudah alih, reka bentuk web moden telah menyingkirkan had reka letak tetap dan beralih kepada reka letak responsif. Reka letak responsif membolehkan halaman web menyesuaikan diri secara automatik kepada peranti yang berbeza dan memberikan pengalaman pengguna yang lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS untuk melaksanakan reka letak jadual responsif, dengan contoh kod khusus.

1. Tetapkan gaya asas:
   Untuk menjadikan jadual disesuaikan secara automatik kepada peranti berbeza, anda perlu menetapkan gaya asas terlebih dahulu. Biasanya, kami akan menetapkan bekas induk jadual kepada kedudukan relatif dan menetapkan elemen jadual kepada peratusan lebar untuk menyesuaikan diri dengan saiz skrin yang berbeza.

.container {
  position: relative;
}

table {
  width: 100%;
}

2. Sediakan reka letak jadual responsif:
   Dalam susun atur jadual tradisional, lajur jadual dibalut secara automatik apabila skrin menjadi lebih sempit. Tetapi dalam reka letak responsif, untuk memberikan kebolehbacaan yang lebih baik dan pengalaman pengguna pada skrin yang lebih kecil, kami boleh menukar jadual kepada reka letak menegak. Dengan cara ini, setiap sel akan menduduki barisnya sendiri dan berbaris secara menegak apabila skrin semakin sempit. Untuk mencapai matlamat ini, kami boleh menggunakan pertanyaan @media CSS untuk mengesan lebar skrin dan menggayakannya secara berbeza mengikut keperluan.

@media screen and (max-width: 600px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  tr {
    margin-bottom: 10px;
  }

  th,
  td {
    display: inline-block;
  }

  th {
    font-weight: bold;
  }
}

Dalam kod di atas, kami menggunakan pertanyaan @media untuk menetapkan gaya apabila lebar skrin kurang daripada atau sama dengan 600px. Dalam kes ini, kami menetapkan atribut paparan elemen berkaitan jadual untuk disekat supaya ia disusun secara menegak. Pada masa yang sama, kami menetapkan atribut paparan sel dalam pengepala jadual dan badan jadual kepada sekatan sebaris supaya ia disusun secara mendatar.

3. Tetapkan butiran gaya jadual:
   Selain reka letak responsif asas, anda boleh meningkatkan lagi pengalaman pengguna dengan melaraskan saiz fon, ketinggian baris dan jidar sel jadual. Bergantung pada lebar skrin peranti, saiz fon boleh ditambah atau dikurangkan untuk memastikan kebolehbacaan.

@media screen and (max-width: 600px) {
  /* Other styles */
  
  th,
  td {
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }
}

Dalam kod di atas, kami menetapkan saiz fon, ketinggian baris dan jidar sel apabila lebar skrin kurang daripada atau sama dengan 600px dalam pertanyaan @media. Anda boleh menyesuaikannya mengikut keperluan anda.

Kesimpulan:
Dengan contoh kod CSS di atas, kami boleh melaksanakan susun atur jadual responsif dengan mudah. Dengan cara ini, sama ada pengguna menggunakan telefon mudah alih, tablet atau komputer, borang tersebut secara automatik boleh menyesuaikan diri dengan peranti yang berbeza dan memberikan pengalaman pengguna yang lebih baik. Semoga artikel ini dapat membantu anda.

Rujukan:

• https://css-tricks.com/accessible-simple-responsive-tables/
• https://www.w3schools.com/howto/howto_css_responsive_table.asp

Atas ialah kandungan terperinci Panduan untuk melaksanakan susun atur jadual responsif menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!