5

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

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

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


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

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

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

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

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

2
  • 1
    Задать у контейнера фиксированную ширину (width: 600px) и сделать overflow: scroll.
    – Regent
    26 июн 2015 в 7:54
  • 1
    Думаю вы это знаете и ваш дизайн чем-то обоснован, но все же напомню, что горизонтальная прокрутка не приветствуется в web-дизайне :-)
    – koks_rs
    26 июн 2015 в 8:13

2 ответа 2

6

Можно задать у контейнера фиксированную ширину (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>

4

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.