Обеспечение согласованного переноса текста в ячейку таблицы, когда последняя ячейка имеет ширину 100 %. ⇐ CSS

[Anonymous]

См. таблицу с двумя ячейками в демо-версии здесь.
https://plnkr.co/edit/EpAX5Mo5YWetj02E
HTML:

Код: Выделить всё

Heading






https://example.com/one-two-three/four

CSS:

Код: Выделить всё

td:last-child {
width: 100%;
background: yellow;
}

Желтая пустая ячейка имеет ширину 100%. Это приводит к другому переносу текста в Firefox.


чем в Chrome или Safari...


Оба варианта поведения верны? Есть ли способ заставить Firefox вести себя как Chrome?
Я попробовал два решения, которые исправляют этот конкретный пример, но на практике они мне не помогли. Во-первых, добавление минимальной ширины к TD, содержащему текст (но в реальном мире у меня есть несколько столбцов, содержащих короткие строки, где минимальная ширина выглядит плохо). Во-вторых, я попытался заменить желтый TD на DIV вне таблицы (но в реальном мире строки таблицы имеют полосатую полоску, и я хочу, чтобы цвет фона каждой строки распространялся по ширине окна).

Подробнее здесь: https://stackoverflow.com/questions/786 ... -width-100