显示差异：firefox和chrome的网格渲染

Question

我正在尝试通过并排呈现 2 个 CSS 表 (display:table) 来创建主从视图。为了分割视图，我使用 CSS Grid。

主面板通常有 1-10 行。但是，详细内容有 > 50-60 行。

我创建了一个代码笔：https://codepen.io/rahuldj/pen/ExYPpGm

它在 chrome 中正确呈现。但是，在 Firefox 中，行数较少的表格与其他（较长）表格的高度相同。

我尝试明确指定行等的高度，但是当父级是网格时，所有这些似乎都在 Firefox 中被忽略了。

有没有人知道解决这个问题的方法？

HTML

<div class="grid">
  <div class="table">
    <div class="th">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
  </div>
  <div class="table">
    <div class="th">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
  </div>
</div>

CSS

.grid{
  display:grid;
  grid-template-columns:0.3fr 0.7fr;
  grid-column-gap:30px;
}

.table{
  display:table;
  width:100%;
}

.th {
  display:table-row;
  font-weight:bold;
}

.th > div{
  display:table-cell;
}

.row{
  display:table-row;
}

.row > div{
  display: table-cell;
}

Answer 1

Min-height 不适用于 Firefox 中的表格元素，包括 td.原因是表格单元格在必要时总是会拉伸，因此高度实际上相当于表格单元格的最小高度。并且 table-cell 使您的元素表现得像 td，所以在这里同样重要是有道理的。所以试着给你的桌子一个高度，让它自动扩展，这个代码在 Firefox 上也对我有用！ 添加高度：55px（一些最小高度）； 到 .table 希望这会有所帮助

.grid{
  display:grid;
  grid-template-columns:0.3fr 0.7fr;
  grid-column-gap:30px;
}

.table{
  display:table;
  width:100%;
  height:55px;
  background-color:lightgreen;
}

.th {
  display:table-row;
  font-weight:bold;
}

.th > div{
  display:table-cell;
  height: 31px;
}

.row{
  display:table-row;
}

.row > div{
  display: table-cell;
  height:31px;
}

<div class="grid">
  <div class="table">
    <div class="th">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
     <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
     <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
     <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
     <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
  </div>
  <div class="table">
    <div class="th">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
    <div class="row">
      <div>Data 1</div>
      <div>Data 2</div>
    </div>
  </div>
</div>