1911555 - layout wrong when inlining a table with neighboring text

Status: RESOLVED INVALID

(Core :: Layout: Tables, defect)

Description

[Ralf Hergert]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

We want to inline the text contents of a table with its neighboring spans using CSS.
Our HTML looks like this:
<div>
<span>Foobar</span>
<table xmlns="http://www.w3.org/1999/xhtml">
<tbody>
<tr><td align="left">Lorem ipsum ...</td></tr>
</tbody>
</table>
</div>

Our CSS rules look like this:

• {
  display: inline;
  padding: 0;
  border: 0;
  margin: 0;
  }

Actual results:

The text in the table is not properly aligned with the text-span. Even though Firefoxe's developer utils show a zero margin, border and padding for all table elements, the tbody-element is 1px lower, the tr-element is dropping a further pixel and the final td-element again is 1px lower. Causing the table content to be no longer inline with the text-span before the table.

Expected results:

The text in the span and the text in the table should be on the same baseline.

Comment 1

[Jonathan Kew [:jfkthame]]

I see similar behavior in Safari and Chrome, which suggests this is expected behavior, not a bug.

I think it's happening because the UA stylesheet sets vertical-align: middle on the tbody element (and this is inherited to its descendants). Adding vertical-align: baseline to your "globally-set" group of properties should resolve this.