Different 'div' heights in Chrome and Firefox

Question

I have a table whose cells contain div elements with different content, so they have different heights. Take this fiddle as an example:

https://jsfiddle.net/6btarubL/2/

As you can see, the code is really simple:

HTML

<table>
  <tr>
    <td>
      <div style="background-color: orange">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: aqua">
        Line 1<br>
        Line 2
      </div>
    </td>
    <td>
      <div style="background-color: #fac">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
   <tr>
    <td>
      <div style="background-color: #8f5">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: #cb1">
        Line 2.1<br>
        Line 2.2
      </div>
    </td>
    <td>
      <div style="background-color: #eda">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
</table>

CSS

tr {
  height: 100%;
}

td {
  vertical-align: top;
  min-width: 150px;
  height: 100%;
}

td div {
  height: 100%;
}

I'd like that the divs inside the cells took all the space, so they looked the same. Firefox does this, so its rendering is:

Chrome, on the other side, doesn't obbey the height : 100% df the divs, so the rendering is:

Then fun fact is that, if I remember correctly, Chrome was rendering it the same as Firefox until I updated to version 63 (I think I had version 59 before).

Any suggestions? Thanks!

Answer 1

Finally, the solution that worked for me was to use CSS conditionals and load different styles depending on the browser. I've explained it in this question:

Load different CSS rule depending on the browser in an Angular 4 component

Cheers,

Answer 2

You can use display flex

jsfiddle

CSS

tr {
  height: 100%;
  display: flex;
}

td {
  vertical-align: top;
  min-width: 150px;
}

td div {
  height: 100%;
}

With flex, you can center elements, align vertically, reorder, you can do a lot of stuff.

I have already tested in mozilla, you can use prefixes to have more compatibility:

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

Answer 3

The solution whas this CSS:

<!-- THIS CODE DOESN'T WORK -->
tr {
  display : flex;
  height: 100%;
}

td {
  vertical-align: top;
  min-width: 150px;
  height: 1;   
}

td div {
  height: 100%;
}

I'm right where I began. As @3rdthemagical pointed, the display : flex on <tr> breaks the layout and the columns aren't aligned. So, I did another test and these are the results:

WORKING CSS IN CHROME:

tr {
  height: 100%;
}

td {
  height: 1px;
}

div {
  height: 100%;
  background-color: aqua;
}

Sample output:

The above code looks like this in Firefox:

WORKING CSS IN FIREFOX:

tr {
  height: 100%;
}

td {
  height: 100%;   /* <---------------- */
}

div {
  height: 100%;
  background-color: aqua;
}

But, in Chrome I have the problem for which I started this question, so it looks like this:

Who's right? Chrome or Firefox? Isn't there a cross-browser solution for this?

I'll keep on investigating...

Answer 4

HTML Change like below

<table>
          <tr>
            <td>
              <div style="background-color: orange">
                DIV
               <br>
               <br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: aqua">
                Line 1<br>
                Line 2<br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: #fac">
                10<br>
                20<br>
                30<br>
              </div>
            </td>
          </tr>
           <tr>
            <td>
              <div style="background-color: #8f5">
                DIV
               <br>
               <br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: #cb1">
                Line 2.1<br>
                Line 2.2<br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: #eda">
                10<br>
                20<br>
                30<br>
              </div>
            </td>
          </tr>
        </table>

Answer 5

Please Change your this Css Code and Check again. Chrome

td {
  vertical-align: top;
  min-width: 150px;
  height:1;
}