CSS

Question

kullanarak sabit üstbilgileri olan Kaydırılabilir Tablo nasıl Yapılır tablosumun üstbilgisini düzeltmek istiyorum.Tablo kaydırılabilir div içinde kullanılabilir. Lütfen buradaki koduma bakın: http://jsfiddle.net/w7Mm8/114/ bana bunun çözümünü öneririm.

Teşekkür

Benim Kod:

<div style="position: absolute; height: 200px; overflow: auto; "> 
 
    <div style="height: 250px;"> 
 
     <table border="1"> 
 
      <th>head1</th> 
 
      <th>head2</th> 
 
      <th>head3</th> 
 
      <th>head4</th> 
 
      <tr> 
 
       <td>row 1, cell 1</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
      <tr> 
 
       <td>row 2, cell 1</td> 
 
       <td>row 2, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

bunu yapmak için bir arsız yol düşünebiliriz

, bu en iyi seçenek olacaktır sanmıyorum ama Çalışacak.

Başlığı ayrı bir tablo olarak oluşturun, sonra diğerini div'e yerleştirin ve maksimum boyutu ayarlayın, sonra kaydırmanın overflow kullanarak girmesine izin verin.

HTML:

<table border="1"> 
    <tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
    </tr> 
</table> 
<div class="scroll"> 
    <table> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr> 
    </table> 
</div> 

CSS:

table { 
    width: 500px; 
} 

.scroll { 
    max-height: 60px; 
    overflow: auto; 
} 

DEMO HERE

Answer 2

Ne yapmak istediğiniz tablonun başlığından tablonun içeriği ayrıdır. Sadece <th> öğelerinin kaydırılmasını istiyorsunuz. Bu ayırmayı HTML'de <tbody> ve <thead> öğeleriyle kolayca tanımlayabilirsiniz.
Artık tablonun başlığı ve gövdesi birbirine bağlı, hala aynı genişliğe (ve aynı kaydırma özelliklerine) sahip olacaklar. Artık artık bir tablo olarak 'çalışma' yapmalarına izin vermek için display: block'u ayarlayabilirsiniz. Bu şekilde <thead> ve <tbody> ayrılır. <thead> artık organ olarak aynı genişliğe çünkü statik belirlesin,

table tbody 
{ 
    overflow: auto; 
    height: 100px; 
} 

Ve son:

table tbody, table thead 
{ 
    display: block; 
} 

Şimdi tablonun vücuda kaydırma ayarlayabilirsiniz tablonun başlığına genişliği: Ayrıca <td> için statik bir genişlik belirlesin

th 
{ 
    width: 72px; 
} 

. Bu, hizalanmamış sütunların konusunu çözer. ayrıca bazı HTML öğelerini eksik

td 
{ 
    width: 72px; 
} 

---

Not. Her satır başlık satırını içeren bir <tr> elemanı, olmalıdır:

<tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
</tr> 

Bu ne anlama geldiğini bir umut.

jsFiddle