Полоса прокрутки у таблицы

351

15 декабря 2016, 16:26

Есть PHP код: <?php echo file_get_contents(...); ?>. Он выводит на страницу следующее:

<table style="width: 2000px;">
    ...
</table>

Из-за этой таблицы страница расширяется. Как сделать так, чтобы страница не расширялась, то есть сделать ширину отображаемого фрагмента, например, 600px и внизу у таблицы сделать полосу прокрутки? Саму таблицу сжимать нельзя, ширина и высота её строчек и столбцов не должны измениться.

Как должно быть:

Как получается:

Это примерные скриншоты на обычной таблице.

Answer 1

Можно задать у контейнера фиксированную ширину (width: 600px) и сделать overflow: scroll:

table { 
    width: 2000px; 
} 
 
td { 
    border: solid 1px; 
} 
 
.container { 
    width: 600px; 
    overflow: scroll; 
}

<div class="container"> 
    <table> 
        <tr> 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
            <td>4</td> 
            <td>5</td> 
        </tr> 
    </table> 
</div>

Answer 2

table { 
  display: block; 
  overflow: auto; 
  max-width: 100%; 
} 
 
td { 
  border: 1px solid; 
}

<table> 
  <tr> 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
  </tr> 
  <tr> 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
    <td>123456789012345678901234567890 
  </tr> 
</table>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Динамическое удаление строк таблицы [закрыто]

Есть вот такая таблица

330

HTML

Перенос слов в textarea

Как сделать перенос слов в текстовом поле?

272

HTML

Растягивание textarea во все стороны

Как можно предоставить пользователю возможность растягивать элемент textarea во все стороны? Пример ожидаемого результата показан на рисунке

323

HTML

Баг с анимацией в Chrome

В Firefox этот код работает отлично, но в Chrome всё содержимое этого раздела не отображается после того, как был закрыт последний активный элементПятый...

288