See the two-cell table in the demo here.
https://plnkr.co/edit/EpAX5Mo5YWetj02E
HTML:
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
</head>
<table>
<thead>
<tr>
<th>Heading</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
https://example.com/one-two-three/four
</td>
<td></td>
</tr>
</tbody>
</table>
</html>
CSS:
td:last-child {
width: 100%;
background: yellow;
}
The yellow, blank cell is styled to be width 100%. This provokes different text wrapping in Firefox
than in Chrome or Safari…
Are both of these behaviours correct? Is there a way to make Firefox behave like Chrome?
I have tried two solutions which fix this specific example but are no good to me in practice. Firstly, adding a min-width to the TD containing the text (but in the real world I have some columns of containing short strings where a minimum width looks bad). Secondly I have tried replacing the yellow TD with a DIV outside the table (but in the real world the rows of the table are zebra striped and I want the background colour of of each row to extend over the width of the window).