Resolved: Table height 100% difference between Firefox and Chrome

Question:

I’ve a table inside another table in HTML/CSS – and I want the inside table be at height 100% of the surrounding table cell.
Something like that (the pink table has 100% of the height):

That works fine in Firefox – but in Chrome I get this:

The code for both is:

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

I tried to keep it simple. But who gets it wrong? FF or Chrome? And how can I talk Chrome into drawing the inside table 100% in height?

Answer:

So, you want the table with class table-base to have 100% the height of the other table, that’s right?
If so, I defined the height to 100% on that class.

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

Hope this helps. Regards

If you have better answer, please add a comment about this, thank you!

Resolved: Table height 100% difference between Firefox and Chrome

Resolved: linq2db throws exception when filtering by nested collection

Resolved: Table data is coming as empty in React

Resolved: In a Pinescript v5 Strategy why is my bool not working?

Leave A Reply