Jak ustawić stół, który jest szerszy niż rozmiar ekranu, przewijany i czy wiersz nagłówka jest stały?

Question

Mam table z 2 kolumnami i każda kolumna ma szerokość 800 pikseli. Chcę pokazać tę tabelę w oknie 800x50. Aby wyświetlić pełną tabelę, powinien być poziomy i pionowy pasek przewijania.

Chociaż znalazłem kilka powiązanych rozwiązań (this i this) na SO, działają one tylko wtedy, gdy szerokość stołu jest mniejsza niż rozmiar ekranu. W moim przypadku rozmiar ekranu to 1200 pikseli, a całkowita szerokość stołu to 1600 pikseli.

Jak mogę to zrobić? Chcę osiągnąć coś w rodzaju this.

EDYTOWANIE Ups, zapomniałem dodać jeszcze jedno wymaganie. Przepraszam. Chcę, aby nagłówek tabeli pozostał naprawiony, podczas gdy użytkownik przewija tabelę.

EDIT2

Próbowałem poniżej wymienionych rozwiązań zawinąć w div, ale w tym wypadku pionowy pasek przewijania nie pokazuje się. Zobacz this table z opakowaniem div. Wygląda na to, że problem występuje tylko wtedy, gdy szerokość stołu jest większa niż rozmiar ekranu. Testuję na FF3.6.

Edit3

aktualny kod table. Nie ma pionowego przewijacza, mimo że mogę przewijać w pionie.

<div style="overflow:scroll; width:800px;height:50px" > 
<table style="width:1600px" border="1"> 
    <thead> 
    <tr> 
     <th style="width:800px">id_1</th> 
     <th style="width:800px">id_1</th> 
    </tr> 
    </thead> 
    <tbody style=""> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    </tbody> 
</table> 
</div> 

Answer 1

Można zawinąć tabelę w div, który ma stały rozmiar (800x50) i ustawić overflow:scroll.

Answer 2

umieścić tabelę w div o szerokości < 800 i ustaw overflow: scroll.

Answer 3

Nie wiem, czy to by działało, ale czy próbowałeś ustawić dla strony max-width: 100%?

Answer 4

Wystarczy dodać overflow:scroll do css elementu tabeli. Btw. Twój przykład nie pokazuje żadnego przewijania.

Answer 5

Jeśli chcesz nagłówek do pozostają stałe po prostu zrobić kilka css

#header { 
    position:fixed; 
    left:0; 
    top:0; 
}