Горизонтальная прокрутка ячеек таблицы, если они слишком длинные, чтобы поместиться в таблицу шириной 100% без масштабирования

Question

У меня есть таблица с 3 столбцами.

Ширина кабеля 100%, поэтому он заполняет весь видовой экран ячейками настолько широкими, насколько они должны быть.

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

Вместо этого я хочу, чтобы длинная ячейка начала прокручиваться с overflow-x: scroll. Я не могу заставить это работать.

Мой код:

<style>
table {
    width: 100%;
    border: 1px; solid;
    border-collapse: collapse
}
td {
    border: 1px solid;
}
td.long-cell {
    overflow-x: scroll;
}
</style>

<table>
    <tr>
        <td>Short String</td>
        <td>Short String</td>
        <td class="long-cell">Loooooooooooooooooooooooooooooooooooooooooong String</td>
    </tr>
</table>

JSFiddle

Если вы уменьшите область просмотра с помощью инструментов dev, таблица начнет уменьшаться.

Я пытался использовать table-layout: fixed, однако это означает, что я должен установить фиксированную ширину столбцов, что я не могу сделать, так как содержимое имеет непредсказуемую длину.

По сути, я хочу таблицу, которая всегда 100% в ширину, никогда масштабируется, а ячейки можно прокручивать по горизонтали только при необходимости .

Answer 1

Я решил эту проблему, установив max-width: 40vw для ячеек, которые могут быть слишком длинными.

Вы можете попробовать разные значения vw, однако что-то между 1 и 99, кажется, работает несколько.