CODEWITHSUNDEEP
htmlcssfirefoxhtml-table
Alex from Jitbit
Alex from Jitbit

Reputation: 60822

Empty table-cell taller than non-empty

I'm struggling with a rendering issue (that might be a bug in Firefox, because Chrome and Edge look fine)

An empty <td> (table cell) makes the whole row taller if there's padding and vertical-align applied to this cell (or the containing row). If the table-cell is non-empty - the height issue is gone. Adding a stupid &nbsp; fixes this.

Here's the code example

table {float:left;margin-right:10px} /* so tables are side-by-side just to demonstrate the bug */

td {
  vertical-align:baseline;
  padding-bottom:20px;
}
<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

jsfiddle: http://jsfiddle.net/snhvc6dx/10/

Anyone faced anything similar and/or knows a workaround?

PS. I'm on Firefox 62.0b6

UPDATE: the vertical-align:baseline is very (!) often added by "CSS-reset" boilerplates for many front-side frameworks, so it was not my choice. As for the "why would anyone need an empty td?" well, this table is rendered at runtime, there's just no data in the database for that cell.

Upvotes: 3

Views: 1393

Answers (5)

Steven Lambert
Steven Lambert

Reputation: 5901

I'm not 100% certain this is the issue but based on some experimentation it would seem to coincide.

The baseline of text is an interesting thing (explained very well in this other StackOverflow question). Essentially text elements can have different heights based on the font used. This height determines where the baseline of the text is.

When looking at Firefox font inspector, the default font for a text element is Times New Roman (or whatever your browsers default is), but for the empty cell, there is no font assigned.

Firefox devtools font inspector

It would seem that Firefox "no font" font has a different baseline than Times New Roman. You can verify this by creating two <span> tags with the same senario and seeing the baseline of the element box.

Span element with text showing baseline box Empty span element with a higher baseline

When the elements are aligned to the baseline, the empty element has a different baseline so the text gets pushed down to match it.

Since it seems to be a Firefox issue, I don't know if there's much you can do to fix the combination other than not to use vertical-align: middle in the table and instead use top, middle, or bottom.

table {float:left;margin-right:10px} /* so tables are side-by-side */

td {
  vertical-align:top;
  padding-bottom:20px;
}
<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

If you can't avoid it, then @Temani's answer would seem to be the best course of action.

Upvotes: 2

Karol Samborski
Karol Samborski

Reputation: 2955

It looks like a bug or undefined behaviour. You can make them equal height by setting the same line-height for example line-height: 30px

Upvotes: -1

Peter Riess
Peter Riess

Reputation: 9

http://jsfiddle.net/snhvc6dx/11/

so, you are tellig the browser that the text should be set baseline but you're padding the cell from the bottom baseline.

just set vertical-align to middle

vertical-align:middle;

or to top if the text should stay on top of the cell...without padding-bottom

Upvotes: -1

Temani Afif
Temani Afif

Reputation: 273626

I don't know exactly the issue but you can rely on pseudo element to add an empty element and it will be the same like adding &nbsp;:

table {float:left;margin-right:10px} /* so tables are side-by-side */

td {
  vertical-align:baseline;
  padding-bottom:20px;
}
td:after {
 content:"";
}
<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

Upvotes: 2

Chris Hitchcock
Chris Hitchcock

Reputation: 399

If you're setting up for future content below the first i'd use colspan. If you're not needing more rows before the first, just drop the second td

<table border=1>
  <tr>
    <td colspan=2>this table is taller</td>
  </tr>
  <tr>
    <td>more content</td>
    <td>even more content</td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
  <tr>
    <td colspan=2>I has content 2 bars of content</td> 
  </tr>
</table>

so like that if you're needing it to go across both.

If your table won't have additional content, drop the second td

<table border=1>
  <tr>
    <td> this table is taller</td>
  </tr>
</table>

Here's a fiddle http://jsfiddle.net/snhvc6dx/32/

Keep in mind, this won't resize without making your tables responsive, so as the screen gets smaller your tables will stack on top of each other instead of remaining side by side.

Upvotes: -1

Related Questions