React中使用CSS Grid布局渲染表格出现高度不协调如何解决

问题根源 #

你遇到的表格高度异常拉伸是CSS Grid布局的默认行为导致的：Grid布局中align-items属性默认值为stretch，会强制同一行内所有网格项的高度匹配该行最高元素的高度，才会出现短表格下方出现大量空白的情况。

最简修复方案 #

给.markets-container样式新增一行align-items: start即可，修改后的完整样式如下：

.markets-container {
  margin: 12.5px 0 0 0;
  min-height: 430px;
  max-height: 430px;
  overflow: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
  /* 新增如下配置，让网格项按自身内容高度排列，顶部对齐 */
  align-items: start;
}

可选优化方案 #

如果希望单个表格内容过长时独立滚动，避免整体容器滚动后看不到表头，可以给每个表格外层套一个独立的滚动容器：

1. 修改JSX结构，给每个表格加外层包裹：

<Card.Body className="markets-container"> 
  { filteredMarkets.map((market) => (
    <div className="market-card" key={market.cId}>
      <Table size="sm" borderless={true} bordered>
        <thead>
          <tr>
            <th> {market.marketName} </th>
          </tr>
        </thead>
        <tbody> 
          {market.selections.map((selection) => ( 
            <tr key={selection.id}>
              <td> {selection.name} </td>
              <td> { selection.price.toFixed(2) } </td>
            </tr> 
          ))} 
        </tbody>
      </Table>
    </div>
  ))} 
</Card.Body>

2. 新增对应样式：

.market-card {
  /* 控制单个表格最大高度，可根据需求调整 */
  max-height: 210px;
  overflow: auto;
}

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