Search code examples
htmlcssgoogle-chromefirefoxhtml-table

Table height 100% difference between Firefox and Chrome

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): enter image description here

That works fine in Firefox - but in Chrome I get this: enter image description here

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?

Solution

  • 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