CSS Table Display Differences - Chrome Vs Firefox

This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?

Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.

Firefox does a miscalculation when adding padding to td.

So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.

Table CSS has different effects in Chrome and Firefox

Just add 'max-height:tableHeight' to .scolling_div

.scrolling_div {
    height: 100%;
    overflow-y: scroll;
    max-height: 50vh;
}

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.

Why does this table render differently between Chrome and Firefox?

To apply display: inline; to a table row (via class .person) doesn't really make sense - either you use DIVs and apply according CSS to them or you use a "real" table (i.e. HTML table elements like table, trandtd`, as it would be without that CSS rule).

Everything else, i.e. every "mixture" of default table layout properties and different CSS display definitions just depends on the browser's tolerance/interpretation which you are experiencing. But I doubt that this (i.e. the tr tags and their display: inline definition) is a valid combination of "native" HTML layout properties and CSS.

I would for example use flexbox properties on DIVs instead of all those not-real-table-elements as shown below:

body {  background-color: #e1e1e1;  word-wrap: break-word}
#about-table {    display: flex;    justify-content: center;
}
.panel {  background-color: #f5f5f6;  border-radius: 4px;  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);  color: #1c1c1c;  margin: 16px;  padding: 32px;  text-align: center;}
.person {  display: flex;  width: 30%;  align-items: center;}
.portrait {  width: 100%;}
.portrait-container {  max-width: 256px;  width: 50%;}
.portrait-label {  font-weight: 600;  width: 128px;}

<head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />    <link rel="stylesheet" href="/lib/index2.css" /></head><body>  <div class="panel">    <div id="about-table">      <div class="person">        <div class="portrait-container"><img class="portrait" src="/img/head-julian.jpg" /></div>        <div class="portrait-label">Person 1</div>      </div>      <div class="person">        <div class="portrait-container"><img class="portrait" src="/img/head-simon.jpg" /></div>        <div class="portrait-label">Person 2</div>      </div>      <div class="person">        <div class="portrait-container"><img class="portrait" src="/img/head-jacob.jpg" /></div>        <div class="portrait-label">Person 3</div>        </div>    </div>  </div></body>

Table cell and border displaying differently in IE/Chrome and Firefox/Opera

Seriously, what gives?

Yeah... table cell heights and vertical border are really quite ill-defined in the CSS 2.1 specification. There's nothing that explains fully how they interact, and the standard block model doesn't quite cover it. The figure in section 17.6.1 where they demonstrate the definition of widths pointedly doesn't cover heights.

FWIW I don't think Mozilla/Opera's interpretation makes any sense, but I can't say it's out-and-out wrong.

how can I make this render the same on each browser (and no I can't use a div I need to use a table in this case).

How about a div inside the table?

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

Now it's clear which measurement the ‘100px’ refers to. This works for me.

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>

Why does Safari treat these table cells so differently than chrome and firefox?

The spec leaves this explicitly undefined:

CSS 2.2 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.

This means in particular that CSS does not define how the height of a cell spanning more than one row is distributed across the rows that it spans.

There is no good way to homogenize the table's appearance except by providing absolute heights to the table and/or the table rows. Given an arbitrary image whose height is not known in advance, this is pretty much impossible with CSS table layout.

CSS Table Display Differences - Chrome Vs Firefox