具有折叠列 no-JS 的 css-grid 响应表

Question

我设法使用 css-grid（无 JS）创建了一个带有折叠列的响应式表格。

我使用 2 个 CSS 变量来控制显示：--data-cols 和 --show-cols。

即如果 --data-cols: 3 但 --show-cols: 2，则网格只有 2 列，但数据仍然有 3。这通常会导致数据环绕到下一行。所以我们希望 css-grid 隐藏第三列，而不是跳过它。

诀窍是创建一个跨越所有 3 个数据列的不可见行。这似乎迫使网格有 3 列。第三列的宽度为 0，因为 grid-auto-columns: 0;

这似乎在我的测试中有效。但这感觉就像一个黑客。有没有更好的方法（不用JS）？

.itemTable {
  display: flex;
  justify-content: center;
  --show-cols: 1;
}

.itemTable:not(.data1cols) {
  --show-cols: 2;
}

.itemTable.data1cols {
  --data-cols: 1;
}

.itemTable.data2cols {
  --data-cols: 2;
}

.itemTable.data3cols {
  --data-cols: 3;
}

.itemTable.data4cols {
  --data-cols: 4;
}

.itemTable table {
  margin: 6px;
  border-spacing: 0 4px;
  padding-left: 0;
  list-style: none;
  overflow: hidden;
}


/* https://www.meltajon.com/dev/how-to-use-supports-display-contents-feature-query-in-safari */

@supports (display: contents) and (caret-color: red) {
  .itemTable table {
    display: grid;
    grid-template-columns: repeat(var(--show-cols), auto);
    grid-auto-columns: 0;
  }
  .itemTable thead,
  .itemTable tbody,
  .itemTable tfoot,
  .itemTable tr {
    display: contents;
  }
}

.itemTable thead>tr>th {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 18px 5px;
  text-align: center;
}

.itemTable td {
  background-color: #555555;
  margin-top: 5px;
}

.itemTable tr * {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #9f9697;
}

.itemTable a {
  padding: 8px 10px;
  display: flex;
}

.itemTable .hidden-span-row>td {
  grid-column: 1 / span var(--data-cols);
  margin: 0;
  padding: 0;
}


/* Mobile-first: Small tablet and larger */

@media all and (min-width: 479px) {
  /* workaround browser not support min() */
  .itemTable:not(.data2cols):not(.data1cols) {
    --show-cols: 3;
  }
}


/* Mobile-first: Tablet and larger */

@media all and (min-width: 700px) {
  .itemTable table {
    grid-template-columns: repeat(var(--data-cols), auto);
  }
}

<div class="itemTable data3cols">
  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
      </tr>


    </tbody>
    <tfoot>
      <tr class="hidden-span-row">
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>

Answer 1

在这个例子中，我使用了一个真正的 css-grid。只有网格单元的简单 HTML 结构。然后我使用：

.grid-table > div:nth-child(3n + 1) { grid-column: 1 / 2; } 确保所有第一列单元格都保留在第一列并且与第二行相同 (:nth-child(3n + 2))。如果您使用相同的选择器，我们可以选择所有第 3 列元素并简单地使用 display: none; 隐藏它们。

与grid-template-columns: repeat(3, min-content); 结合使用时，它们看起来是折叠的。

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-gap: 5px;
  width: min-content;
  margin: 0 auto;
}

.grid-table > div {
  width: 150px;
  padding: 5px;
  background-color: darkblue;
  color: white;
}

.grid-table > div:nth-child(3n + 1) {
  grid-column: 1 / 2;
}

.grid-table > div:nth-child(3n + 2) {
  grid-column: 2 / 3;
}

.grid-table > div:nth-child(3n + 3) {
  display: none;
}

<section class="grid-table">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>data</div>
  <div>data</div>
  <div>data</div>
  <div>data</div>
  <div>data</div>
  <div>data</div>
</section>