Сделать вложенную таблицу с автоматической компоновкой таблицы, переполнение шириной 100%, когда окно слишком маленькое
У меня есть таблица с table-layout: auto, которой я хочу дать 100% ширину, но я хочу, чтобы она переполнялась по горизонтали, когда ширина окна меньше минимального пространства, необходимого для полного отображения его содержимого, без того, чтобы отображалась горизонтальная полоса прокрутки окна , вместо.
См. Эти примеры:
ПРИМЕР 1 (рабочий)
<div style = "width: 100%; overflow-x: auto">
<table style = "table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
<tr>
<td>dcsdcsdcasd1</td>
<td>dcsdcsdd2</td>
<td>dcsdcsdasxascasd3</td>
<td>dcsdcsdasd4</td>
<td>dcsdcsdxasacasd5</td>
<td>dcsdcsdcxasd6</td>
<td>dcsdcsxaxasdcasd7</td>
<td>dcsdasd8</td>
<td>dcsdd9</td>
<td>dcsdxaxasxascsdcasd10</td>
</tr>
</table>
</div>ПРИМЕР 2 (не работает)
<table>
<tr>
<td>
<div style = "width: 100%; overflow-x: auto">
<table style = "table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
<tr>
<td>dcsdcsdcasd1</td>
<td>dcsdcsdd2</td>
<td>dcsdcsdasxascasd3</td>
<td>dcsdcsdasd4</td>
<td>dcsdcsdxasacasd5</td>
<td>dcsdcsdcxasd6</td>
<td>dcsdcsxaxasdcasd7</td>
<td>dcsdasd8</td>
<td>dcsdd9</td>
<td>dcsdxaxasxascsdcasd10</td>
</tr>
</table>
</div>
</td>
</tr>
</table>Когда размер окна изменяется и становится меньше ширины, необходимой для полного отображения содержимого, ширина внутренней таблицы в примере 2 остается фиксированной, а горизонтальная полоса прокрутки отображается для всего окна. Этого не происходит в примере 1, где вместо этого результат является именно желаемым. Проблема заключается в таблице упаковки в примере 2. Однако в моем реальном проекте, где мне нужно было бы выполнить эту работу, у меня есть таблица упаковки вокруг моего HTML-кода, и я не могу ее удалить. В любом случае, я не могу понять, почему таблица упаковки должна иметь какое-либо значение в этом отношении.
Есть ли предложения сделать эту работу, как задумано, даже при наличии внешней таблицы?
@misorude Это отлично сработало !!! Спасибо! Не могли бы вы опубликовать его в качестве ответа, чтобы я мог его принять?
Ответы 1
Ваша внешняя таблица во втором примере по-прежнему растет настолько, насколько требует ее содержимое, поэтому вы получаете полосу прокрутки для всего документа.
Вам нужно ограничить эту таблицу по ширине для начала, width: 100%; table-layout: fixed;, чтобы она могла переполниться, когда внутренняя таблица внутри нее станет шире.
Ваша внешняя таблица во втором примере по-прежнему растет настолько, насколько требует ее содержимое, поэтому вы получаете полосу прокрутки для всего документа. Вам нужно ограничить эту таблицу по ширине для начала -
width: 100%; table-layout: fixed;