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

#html #css

Есть PHP код: . Он выводит на страницу следующее:


    ...



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



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



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



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

Ответы

Ответ 1

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



table {
    width: 2000px;
}

td {
    border: solid 1px;
}

.container {
    width: 600px;
    overflow: scroll;
}

    

        

            
1
            
2
            
3
            
4
            
5
        
    



Ответ 2

table {
  display: block;
  overflow: auto;
  max-width: 100%;
}

td {
  border: 1px solid;
}

  

    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
  
  

    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890
    
123456789012345678901234567890