将Tr与响应表分开

Question

我有一个要使用CSS Grid创建的用于响应式布局的表。但是在小屏幕尺寸下，即使您使用 overflow-x：auto;

，列标题重叠

如何使其无法打开？

代码：

<div class="table container">

    <table>
        <thead>
            <tr>
            <th>Month</th>
            <th>Savings</th>
            <th>Savings</th>
            <th>Savings</th>
            <th>Savings</th>
            </tr>
        </thead>
        <tbody style="overflow-x:auto;">
            <tr>
            <td>January</td>
            <td>$100</td>
            <td>$100</td>
            <td>$100</td>
            <td>$100</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

  table {
    margin: 2rem 0 2rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    width: fit-content;
    overflow-x: auto;
    display:grid;
    grid-template-columns: 100px 1fr;

        thead {

            tr {
              display:grid;
              grid-gap: 1rem;
              grid-auto-flow: column;
              grid-template-rows: repeat(5, .5fr);
              justify-content: center;
              align-items: center;
              text-align: center;
              font-size: .9rem;
            }
        }

        tbody {
          display:grid;
          grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));

          tr {
            display:grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(5, 1fr);
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: .9rem;
          }
        }
      }

以下是发生的情况的图像：

图片。

Answer 1

一个CSS网格已经像HTML表一样显示了。

通过使用单个网格而不是嵌套在父网格中的两个网格来简化设计，可以消除出现问题的行为：

代码：

<div class="grid-table">
  <div>Month</div>
  <div>Savings</div>
  <div>Savings</div>
  <div>Savings</div>
  <div>Savings</div>
  <div>January</div>
  <div>$100</div>
  <div>$100</div>
  <div>$100</div>
  <div>$100</div>
</div>

CSS：

.grid-table {
  margin: 2rem 0 2rem 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: fit-content;
  overflow-x: auto;
  display:grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 1rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, .5fr);
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .9rem;
}