CODEWITHSUNDEEP
cssfirefoxcss-tables
Andrey
Andrey

Reputation: 191

Firefox CSS table - content shifts

When comparing the following code in Chrome (v56) and Firefox (v51), Firefox is shifting the content down. Chrome behaves as expected.

<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
    .content {
        height: 200px;
        width: 200px;
    }
    .table {
        width: 100%;
        height: 50%;
        display: table;
    }
    .leftCell {
        border: 1px solid #cccccc;
        width: 50%;
        height: 100%;
        overflow: auto;
        display: table-cell;
    }
    .rightCell {
        width: 50%;
        height: 100%;
        display: table-cell;
        border: 1px solid #cccccc;
    }
</style>
</head>
<body>
<div class="content">
    <div class="table">
        <div class="leftCell">
            <div>row</div>
            <div>row</div>
            <div>row</div>
            <div>row</div>
        </div>
        <div class="rightCell"></div>
    </div>
</div>
</body>
</html>

Chrome: Chrome

Firefox: Firefox

The problem only appears when the 'rightCell' div is empty. If I remove that div, content displays where expected. Anybody experienced this issue before? Any known fixes for this? Regards

Upvotes: 0

Views: 95

Answers (1)

Johannes
Johannes

Reputation: 67748

It's because the contents of table cells are vertically aligned along their baselines. If there is text in them, that's the first line. If there is no text in them, that's the bottom border of the cell, which you can see in the image you posted. That's the reason for the display your snippet results in.

To avoid it, assign vertical-align: top to both cells (see my snippet)

.content {
  height: 200px;
  width: 200px;
}

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

.leftCell {
  border: 1px solid #cccccc;
  width: 50%;
  height: 100%;
  overflow: auto;
  display: table-cell;
  vertical-align: top;
}

.rightCell {
  width: 50%;
  height: 100%;
  display: table-cell;
  border: 1px solid #cccccc;
  vertical-align: top;
}
<div class="content">
  <div class="table">
    <div class="leftCell">
      <div>row</div>
      <div>row</div>
      <div>row</div>
      <div>row</div>
    </div>
    <div class="rightCell"></div>
  </div>
</div>

Upvotes: 2

Related Questions