我在 HTML/CSS 中的另一個表格內有一個表格 - 我希望內部表格的高度為周圍表格單元格的 100%。
類似的東西（粉紅色的桌子有 100% 的高度）：
這在 Firefox 中運行良好 - 但在 Chrome 中我得到了這個：
兩者的代碼是：
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>我盡量保持簡單。但是誰弄錯了呢？FF還是鉻？以及如何讓 Chrome 將內表繪制為 100% 的高度？
uj5u.com熱心網友回復：
因此，您希望具有 table-base 類的表具有其他表的 100% 的高度，對嗎？
如果是這樣，我將該類的高度定義為 100%。
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>希望這可以幫助。問候
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492312.html
上一篇：型別錯誤：onChangeImage不是函式。（在'onChangeImage（result.uri）'中，'onChangeImage'未定義）]