Rumah > hujung hadapan web > tutorial css > #TIL: Jadual paparan dan sebaris tidak serasi dengan pertanyaan kontena

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

Linda Hamilton
Lepaskan: 2025-01-23 12:17:10
asal
783 orang telah melayarinya

Nota kajian: Konflik antara pertanyaan kontena dan mod paparan jadual

#TIL: Display table and inline are incompatible with container queries

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;
}
Salin selepas log masuk

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;
  }
}
Salin selepas log masuk

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>
Salin selepas log masuk
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;
  }
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan