Ekran boyutundan daha geniş, kaydırılabilir ve üstbilgi satırının sabit tutulduğu bir tablo nasıl oluşturulur?

Question

2 sütunlu bir table ve her bir sütun 800 piksel genişliğindeyim. Bu tabloyu 800x50 pencerede göstermek istiyorum. Bu yüzden, tüm tabloyu görüntülemek için yatay ve dikey kaydırma çubuğu bulunmalıdır.

SO üzerinde az sayıda ilgili çözüm buldum (this ve this), yalnızca tablo genişliği ekran boyutundan küçükse çalışırlar. Benim durumumda ekran boyutu 1200px ve toplam tablo genişliği 1600px.

Bunu nasıl yapabilirim? this gibi bir şey elde etmek istiyorum.

EDIT Hatalar, Bir ek gereksinim daha eklemeyi unuttum. Afedersiniz. Kullanıcı, tabloyu kaydırırken tablonun başlığının sabit kalmasını istiyorum.

EDIT2

Ben bir div sarmak için aşağıda belirtilen çözümleri denedim ama bu durumda dikey kaydırma çubuğu görünmüyor

. Lütfen sarıcı div ile this table'a bakın. Bu sorun, yalnızca tablo genişliği ekran boyutundan büyükse oluşur. FF3.6 üzerinde test yapıyorum.

EDIT3

akım table kodu. Dikey olarak kaydırma yapamama rağmen bu, dikey kaydırma çubuğu içermez.

<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

Bir sabit boyut (800x50) ve overflow:scroll ayarlandığı bir div tablo sarabilirdiniz.

Answer 2

genişliği < 800 ile bir div masanızı koyun ve overflow: scroll ayarlayın.

Answer 3

Çalışır mı bilmiyorum, ancak sayfa için max-width: 100% ayarlamayı denediniz mi?

Answer 4

Sadece masa elemanının css için overflow:scroll ekleyin. Btw. örneğiniz herhangi bir kaydırma göstermiyor.

Answer 5

üstbilgi sadece bazı css

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