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

Study notes: Conflict between container query and table display mode

I recently encountered a problem in the web component: I need to hide some columns in the table according to the screen width.

Suppose you need to hide the second and third columns of the table (including the header and cells), the CSS code is as follows:

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

I tried using a container query to only hide these columns on narrow screens (less than 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>

However, this code does not work. The reason is that container queries are only compatible with specific display values:

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

Incompatible display values ​​include: inline, contents, none, and all table-related display values: table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption.

The workaround is to apply a container query to the parent element of the table. My table is inside a web component, and the web component's default display value is inline. Change the component's display attribute to block to solve the problem:

<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>

The :host selector is used in the code because my style is in Shadow DOM and the scope of the container query is limited by Shadow DOM. If you use Light DOM, you can use the component's hyphenated tag name. This approach does not destroy the semantics of the table.

The above is the detailed content of #TIL: Display table and inline are incompatible with container queries. For more information, please follow other related articles on the PHP Chinese website!