Firefox Displaying Table-Cell Incorrectly (Chrome Working Good)

Firefox displaying table-cell incorrectly (chrome working good)

Have you tried table-layout:fixed; on your wrapper div (the one that specifies display: table;)?

I had a similar problem, this property forces the table to be a fixed width instead of determined by its contents. By default the table columns are set to the width of the widest cell (with breakable content) in the row, in your case the image, hence the second column being too big :)

More information on table-layout can be found here

Table and Table-cell working differently in Chrome and Firefox

This is actually a difference in how the images' widths are calculated inside of the table, and not the table elements themselves.

Tables make sure that all content is visible, so if it cannot shrink or wrap its contents then it expands past 100%. Chrome figures out that the images can shrink and adjusts the table width thereafter, while Firefox uses the full widths of the images to calculate the width of the table.

Almost ironically, setting width: 100% on the images will force Firefox to behave in the same fashion as Chrome.

Edit: As a footnote, your "table" structure isn't completely right. It doesn't seem to cause any layout issues in this particular case, but you should make sure to always have the proper table > tbody > tr > td hierarchy to prevent weird behaviour.

Display: table-cell Working in Chrome not working in Firefox

Your basic problem as suggested in comments is that you shouldn't be using a table layout for this. Table layouts are for laying out tabular data, which this isn't.

Browsers have a certain amount of flexibility when it comes to laying out tables as the spec is relatively loose, which accounts for the differences you're seeing on the different browsers. Once you use table-cell rendering, the browser can reapportion space according to its own algorithm.

I would strongly recommend using another layout mechanism such as flexbox, but if you're determined to stick with table layout, you can use style="min-width:400px" to fix your specific issue.

Using position: relative on a table-cell as you have on the right is also going to cause you issues, so you should also reconsider that combination.

Inconsistent behavior of display: table and display: table-cell in different browsers

From Everything You Know About CSS Is Wrong :

CSS tables happily abide by the normal rules of table layout, which
enables an ex­tremely powerful feature of CSS table layouts: missing
table elements are created anonymously by the browser. The CSS2.1
specification states:

Document languages other than HTML may not contain all the ele­ments
in the CSS 2.1 table model. In these cases, the “missing” elements
must be assumed in order for the table model to work. Any table
element will automatically generate necessary anonymous table objects
around itself, consisting of at least three nested objects
corresponding to a “table”/“inline-table” element, a “table-row”
element, and a “table-cell” element.

What this means is that if we use display: table-cell; without first
containing the cell in a block set to display: table-row;, the row
will be implied—the browser will act as though the declared row is
actually there.

So, the specs explicitly allow the use of display: table-cell; or display: table; and define how elements should behave in that case.

It remains unclear to me what's the expected behavior in each of these cases, but it does appears that we're dealing with bugs, and that at least Chrome is working on fixing them.

I gave Oriol the bounty for this answer because it's the only answer I've had thusfar that actually addressed the points I raised and offered some valuable information.

Firefox table cell width completly different than Chrome's

Try adding this:

.table { table-layout: fixed }

See snippet
See POST

/* Latest games */
.lp-latestgames {  height: 466px;}.lp-latestgames .title {  margin-left: 460px;  margin-top: 56px;  margin-bottom: 21px;}.lp-latestgames .table {  margin-bottom: 0;  table-layout: fixed;    /*<<<=====  ADD THIS RULE RIGHT HERE */ }.lp-latestgames .table thead {  background-color: rgba(0, 0, 0, 0.45);}.lp-latestgames .table thead th {  font-size: 16px;  font-weight: 500 !important;  color: white;  height: 49px;  vertical-align: middle;}.lp-latestgames .table thead > tr > th {  border-bottom: none;}.lp-latestgames .table tbody > tr > td {  height: 81px;  border-top: 2px solid #111316;  background-color: rgba(0, 0, 0, 0.19);  vertical-align: middle;  font-size: 14px;  font-weight: 500;  color: white;}.lp-latestgames .table tbody > tr:first-child > td {  border-top: none;}.lp-latestgames .table tbody > tr > td:first-child,.lp-latestgames .table thead > tr > th:first-child {  /* ÜBERARBEITEN!!!!! */  padding-left: 460px;  max-width: 200px;}.lp-latestgames .table tbody > tr > td:last-child,.lp-latestgames .table thead > tr > th:last-child {  /* ÜBERARBEITEN!!!!! */  padding-right: 460px;  max-width: 200px;}.lp-latestgames .table tbody > tr > td > .gd-c-versus {  display: block;  font-weight: normal;  font-family: Arial;  color: #494949;}.lp-latestgames .table thead > tr > th:nth-child(4),.lp-latestgames .table thead > tr > th:nth-child(5),.lp-latestgames .table tbody > tr > td:nth-child(4),.lp-latestgames .table tbody > tr > td:nth-child(5) {  text-align: center;}

<div class="lp-latestgames">  <!-- Games -->  <table class="table">    <thead>      <tr>        <th>Name          <img src="img/gd_content_arrow_dn.png">        </th>        <th>Price Pool          <img src="img/gd_content_arrow_dn.png">        </th>        <th>Entry          <img src="img/gd_content_arrow_dn.png">        </th>        <th>Avg Skill          <img src="img/gd_content_arrow_dn.png">        </th>        <th>Time Remaining          <img src="img/gd_content_arrow_up.png">        </th>      </tr>    </thead>    <tbody>      <tr>        <td>Im bored. Fite me<span class="gd-c-versus">1 vs 1</span>        </td>        <td>          <img src="img/gd_content_coin.png">20</td>        <td>          <img src="img/gd_content_coin.png">10</td>        <td>          <input type="text" value="730" class="circle">        </td>        <td>00:00:32</td>      </tr>      <tr>        <td>EG vs LGD - Wild Cards Entry<span class="gd-c-versus">5 vs 5</span>        </td>        <td>          <img src="img/gd_content_coin.png">1.500.000</td>        <td>          <img src="img/gd_content_coin.png">20</td>        <td>          <input type="text" value="980" class="circle">        </td>        <td>00:01:47</td>      </tr>      <tr>        <td>cyka blyat<span class="gd-c-versus">5 vs 5</span>        </td>        <td>          <img src="img/gd_content_coin.png">20</td>        <td>          <img src="img/gd_content_coin.png">10</td>        <td>          <input type="text" value="730" class="circle">        </td>        <td>00:02:4</td>      </tr>    </tbody>  </table></div>

Firefox vs Chrome: Background overlay is incorrectly sized with display:table-cell

The CSS 2.1 specification "9.3.1 Choosing a positioning scheme: 'position' property" says:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

So even if all other browsers use the value relative as "expected", Firefox is not wrong ignoring it.

Edit

I think wrapping the content into another <div> with position: relative; would be the easiest solution:

HTML

<div class="cell">
    <div class="relative">
        <img src="http://placekitten.com/200/240" />
        <div class="overlay"></div>
    </div>
</div>

CSS

div.cell {
    display: table-cell;
}

div.relative {
    position: relative;
    line-height: 0;
}

div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid red;
}

Demo

Try before buy

---

Related Topics