顯示的差異：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

最小高度不適用於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>