#TIL: 디스플레이 테이블과 인라인이 컨테이너 쿼리와 호환되지 않습니다.

연구 노트: 컨테이너 쿼리와 테이블 표시 모드 간의 충돌

최근 웹 구성 요소에서 문제가 발생했습니다. 화면 너비에 따라 테이블의 일부 열을 숨겨야 합니다.

표의 두 번째와 세 번째 열(헤더와 셀 포함)을 숨겨야 한다고 가정하면 CSS 코드는 다음과 같습니다.

<code class="language-css">:is(th, td):is(:nth-child(2), :nth-child(3)) {
    display: none;
}</code>

좁은 화면(600px 미만)에서만 이러한 열을 숨기기 위해 컨테이너 쿼리를 사용해 보았습니다.

<code class="language-css">table { /* 这部分不起作用 */
  container-type: inline-size;
}

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

그러나 이 코드는 작동하지 않습니다. 그 이유는 컨테이너 쿼리가 특정 display 값(

)과만 호환되기 때문입니다.

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

호환되지 않는 display 값에는 inline, contents, none 및 모든 테이블 관련 display 값이 포함됩니다: table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption.

해결 방법은 테이블의 상위 요소에 컨테이너 쿼리를 적용하는 것입니다. 내 테이블은 웹 구성 요소 내부에 있고 웹 구성 요소의 기본 display 값은 inline입니다. 문제를 해결하려면 구성요소의 display 속성을 ​​block으로 변경하세요.

<code class="language-css">:host {
  container-type: inline-size;
  display: block;
}

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

내 스타일이 Shadow DOM에 있고 컨테이너 쿼리의 범위가 Shadow DOM에 의해 제한되기 때문에 :host 선택기가 코드에 사용되었습니다. Light DOM을 사용하는 경우 구성 요소의 하이픈 태그 이름을 사용할 수 있습니다. 이 접근 방식은 테이블의 의미를 파괴하지 않습니다.

위 내용은 #TIL: 디스플레이 테이블과 인라인이 컨테이너 쿼리와 호환되지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!