Обтекание текста последовательно в ячейках таблицы

Question

У меня есть HTML-таблица со столбцом ячеек, состоящим из двух частей, например,

| Cat (meow)                |
+---------------------------+
| Long-dinosaur-name (roar) |

Есть и другие столбцы, которые не показаны. Браузеры моих пользователей имеют неизвестную ширину. В целом, я хочу показать ячейку одной строкой, как указано выше. Если он становится слишком узким, я в порядке с переносом

| Cat      |
| (meow)   |
+----------+
| Long-    |
| dinosaur-|
| name     |
| (roar)   |

, но если переносится одна строка, все строки также должны переноситься:

| Cat                 |
| (meow)              |
+---------------------+
| Long-dinosaur-name  |
| (roar)              |

Без использования Javascript возможно лисделать это?

Я знаю, что могу использовать <td nowrap> для предотвращения переноса или <br> для принудительного переноса, но как сделать так, чтобы одна ячейка зависела от другой?

Answer 1

Попробуйте использовать медиа-запрос (CSS) с точками останова. Я знаю, что вы сказали, что ширина пользовательских браузеров неизвестна, но вы можете ожидать различную ширину и т. Д.