#TIL: Jadual paparan dan sebaris tidak serasi dengan pertanyaan kontena

Nota kajian: Konflik antara pertanyaan kontena dan mod paparan jadual

Baru-baru ini saya menghadapi masalah dalam komponen web: Saya perlu menyembunyikan beberapa lajur dalam jadual mengikut lebar skrin.

Andaikan anda perlu menyembunyikan lajur kedua dan ketiga jadual (termasuk pengepala dan sel), kod CSS adalah seperti berikut:

:is(th, td):is(:nth-child(2), :nth-child(3)) {
    display: none;
}

Saya cuba menggunakan pertanyaan bekas untuk hanya menyembunyikan lajur ini pada skrin sempit (kurang daripada 600px):

table { /* 这部分不起作用 */
  container-type: inline-size;
}

/* 窄屏幕下隐藏第二列和第三列 */
:is(td, th):is(:nth-child(2), :nth-child(3)) {
  @container (width < 600px) {
    display: none;
  }
}

Walau bagaimanapun, kod ini tidak berfungsi. Sebabnya ialah pertanyaan kontena hanya serasi dengan nilai display tertentu:

<code>- block
- inline-block
- flex
- inline-flex
- grid
- inline-grid
- flow-root</code>

Nilai

Tidak serasi display termasuk: inline, contents, none dan semua nilai display berkaitan jadual: table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption.

Penyelesaian adalah dengan menggunakan pertanyaan bekas pada elemen induk jadual. Jadual saya berada di dalam komponen web dan nilai lalai display komponen web ialah inline. Tukar atribut display komponen kepada block untuk menyelesaikan masalah:

:host {
  container-type: inline-size;
  display: block;
}

/* 窄屏幕下隐藏第二列和第三列 */
:is(td,th):is(:nth-child(2),:nth-child(3)) {
  @container (width < 600px) {
    display: none;
  }
}

Pemilih :host digunakan dalam kod kerana gaya saya dalam Shadow DOM dan skop pertanyaan kontena dihadkan oleh Shadow DOM. Jika anda menggunakan Light DOM, anda boleh menggunakan nama teg tanda sempang komponen. Pendekatan ini tidak memusnahkan semantik jadual.

Atas ialah kandungan terperinci #TIL: Jadual paparan dan sebaris tidak serasi dengan pertanyaan kontena. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!