CSS 网格显示导致表格高度不成比例答案

【问题标题】：CSS Grid Display is Causing Tables to Have Disproportionate HeightsCSS 网格显示导致表格高度不成比例
【发布时间】：2021-11-19 06:01:58
【问题描述】：

在 React 中，我将表映射到一个容器中，每个表都有未知数量的元素。这是我的CSS：

.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;
}

它们中的大多数看起来很整洁，但是在某些情况下，左侧（或右侧）的元素会更改高度以匹配旁边的元素。看 Over Under 0.5 的例子：

下面是一个更极端的例子：

这里是相关的 JSX：

 <Card.Body className="markets-container"> { filteredMarkets.map((market) => ( <Table size="sm" borderless={true} bordered key={market.cId}>
     <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> )) )} </Card.Body>

有没有办法解决这些不相等的高度？

【问题讨论】：

标签： javascript css reactjs css-grid

【解决方案1】：

你也可以试试 Flexbox，只需使用这里的属性https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

或者你也可以尝试位置，给父元素相对，而内部内容绝对，给底部，顶部，右侧或左侧。

【讨论】：