Grid布局下table设置max-height后overflow-y不生效问题

问题核心原因 #

table是特殊的块级元素，默认表格布局逻辑会优先适配内容高度，max-height和overflow属性对table元素本身不生效，这和Grid布局无关，是table元素的固有特性导致的。

快速解决方案 #

给table包裹一层普通块级容器，将max-height和overflow-y属性转移到这个容器上即可：

修改后的HTML

<figure class='orders'>
  <figcaption class='orders__title'>My Orders Table</figcaption>
  <div class='orders__filters'>
    <label class='orders__filter-label' for='year-select' aria-label='Filter orders by year'>Year</label>
    <select class='orders__filter' name='year-select' id='year-select'>
      <option></option>
      <option value='2014'>2014</option>
      <option value='2015'>2015</option>
      <option value='2016'>2016</option>
      <option value='2017'>2017</option>
      <option value='2018'>2018</option>
      <option value='2019'>2019</option>
      <option value='2020'>2020</option>
      <option value='2021'>2021</option>
      <option value='2022'>2022</option>
      <option value='2023'>2023</option>
    </select>
    <label class='orders__filter-label' for='month-select' aria-label='Filter orders by month'>Month</label>
    <select class='orders__filter' name='month-select' id='month-select'>
      <option></option>
      <option value='1'>Janaury</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
  <!-- 新增表格容器 -->
  <div class='orders__table-container'>
    <table class='orders__table'>
      <thead>
        <th>Date</th>
        <th>Amount</th>
        <th>Comment</th>
      </thead>
      <tbody>
        <tr>
          <td>5.5.2020</td>
          <td>$50</td>
          <td>some_comment</td>
        </tr>
        <tr>
          <td>1.12.2022</td>
          <td>$10</td>
          <td>some_comment</td>
        </tr>
        <tr>
          <td>1.1.2023</td>
          <td>$33</td>
          <td>some_comment</td>
        </tr>
        <tr>
          <td>1.1.2023</td>
          <td>$33</td>
          <td>some_comment</td>
        </tr>
        <tr>
          <td>1.1.2023</td>
          <td>$33</td>
          <td>some_comment</td>
        </tr>
        <tr>
          <td>1.1.2023</td>
          <td>$33</td>
          <td>some_comment</td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

修改后的CSS

.orders {
  --orders-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--orders-columns), auto);
  column-gap: 2rem;
}

@media (min-width: 600px) {
  .orders {
    --orders-columns: 2;
  }
}

.orders__title {
  font-weight: bold;
}

.orders__filters {
  display: flex;
  align-items: flex-start;
}

@media (min-width: 600px) {
  .orders__filters {
    justify-content: flex-end;
  }
}

.orders__filter-label {
  display: block;
  padding-right: 0.5rem;
}

.orders__filter+.orders__filter-label {
  padding-left: 1rem;
}

/* 新增容器样式 */
.orders__table-container {
  grid-column: 1 / -1;
  max-height: 200px; /* 根据需求调整高度，原10px过小 */
  overflow-y: auto;
}

.orders__table {
  border-collapse: collapse;
  width: 100%; /* 让表格占满容器宽度 */
}

.orders__table th {
  text-align: left;
}

.orders__table th:last-child,
.orders__table td:last-child {
  text-align: right;
}

可选优化：固定表头 #

如果需要滚动时保持表头固定，可给thead添加sticky定位：

.orders__table thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* 设置背景色避免被下方内容穿透 */
}

内容的提问来源于stack exchange，提问作者pileup