Таблица HTML с фиксированными ячейками при изменении разрешения

Question

У меня есть следующая таблица.Проблема в том, что при увеличении / уменьшении или при различном разрешении заголовки меняют размер.Как я могу заставить их оставаться постоянными?Я хочу, чтобы все было только на одной линии.В настоящее время, если в заголовке более одного слова (т. Е. Response Comment Num), а заголовки меняют размер - слова собираются вместе одно под другим.

<table border="1" style="width:100%;border-collapse: collapse;" cellSpacing="2" cellPadding="2" >
<tr>
<th  style="border:0px solid gray;background:#AAAAAA;color:white;font-weight:700;width:10%">Response Komment #</th>
<th  style="border:0px solid gray;background:#AAAAAA;color:white;font-weight:700;width:60%;">Comment</th>
</tr>
</table>

Answer 1

Вы можете добавить

white-space: nowrap;

к вашим атрибутам "стиля" (которые, вероятно, должны быть в каком-то отдельном файле CSS).

Answer 2

Увеличьте ширину первого заголовка, чтобы избежать переноса, например width: 40%. Вы можете указать дополнительную минимальную ширину, например, min-width: 13em, чтобы избежать наложения на маленькие экраны.

Кроме того, вы можете использовать white-space: nowrap;, чтобы полностью избежать разрывов строк, а затем управлять поведением переполнения с помощью overflow: visible / overflow: hidden.