Bug 112535 – CSS table rows with anonymous cells let the parent table element shine through padding

• Status: RESOLVED
• Resolution: WONTFIX
• Component: Tables

[Marc Nieper-Wißkirchen]

I think it is best to explain this bug with an example. Consider the following HTML snippet:

<ul>
    <li>Short</li>
    <li>LOOOOOOOOOOOOOOOOOOONG</li>
</ul>

Styled with:

ul {
    display: table;
    margin: 0;
    padding: 0;
}

li {
    display: table-row;
}

li:hover {
    background-color: gainsboro;
}

The two list entries are anonymous table cells (as per the CSS table model) and the first table cell needs padding on the right to make it as wide as the second one. The padding, however, does not seem to belong to the table row, which is the list element. When you hover with the mouse over the padding of the short entry, the table row does not turn grey. (This is not CSS specific: DOM events are also not dispatched to the list item when they happen over the padding.)

The bug persists even when one adds a second column to the right (e.g. by adding the style rule li::after { content: 'COLUMN'; display: table-cell; }). The result is that the first table row's extent is two blocks, one containing the short text without the padding, the other one containing the text of the second column.

The bug does not appear when using ordinary tables without extra CSS markup. The bug also does not appear in the Gecko rendering engine. A demonstration is given in the following JSFIDDLE: http://jsfiddle.net/wvg8n/

[Ahmad Saleem]

I am not able to reproduce this bug using attached test case (JSFiddle from Comment 0) in Safari 16.3, all rows show 'grey' on hover and matches with other browsers Chrome Canary 111 and Firefox Nightly 111.

Similarly while trying to place cursor on padding area for short below to see if hover trigger grey background, it didn't for all browsers and again match.

So marking this as "RESOLVED WONTFIX". Thanks!