Ben içerik büyüdükçe scrollerleri tekme bu yüzden 50px yüksekliğinde olmasını yukarıdaki masa istiyorum <table>

Question

<table border="1" style="height:50px; overflow:auto;"> 
    <thead> 
    <tr> 
     <th>Col 1 
     </th> 
     <th>Col 2 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell 3 
     </td> 
     <td>Cell 4 
     </td> 
    </tr> 
    <tr> 
     <td>Cell 5 
     </td> 
     <td>Cell 6 
     </td> 
    </tr> 
    </tbody> 
</table> 

yılında Sabit, ama ben de tablo başlıklarında (thead) gibi üstünde her zaman sabit olması ediyorum Diğer içerik kaydırılabilir olsa da. JQuery kullanarak bir çözüm var mı? Yardımlarınız için şimdiden

teşekkürler.

Answer 1

Bu yayını deneyin: onlar (bir dondurulabilir, kaydırılabilir jquery tablo olan) ne gerek var gibi jQuery Scrollable, Sortable, Filterable table

görünüyor.

Answer 2

<table style="width: 300px" cellpadding="0" cellspacing="0"> 
<tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
</tr> 
</table> 

<div style="overflow: auto;height: 50px; width: 320px;"> 
    <table style="width: 300px;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    </table> 
</div> 

Güncelleme:

Kontrol şuna: Benzer işlevsellik ihtiyacı kendimi Bulundu

Link

Another Link a t CSS Tricks

Answer 3

. Işık ve basit bir şey bulamadım, bu yüzden eklentiyi kendim yarattım: TH Float jQuery Plugin

Umarım birileri bunu yararlı bulur.

Answer 4

İşte benim numaram. Html'nizde de bir şey değiştirmeniz gerekiyor.

hile gerçek kaydırma thead sonra js sokularak oluşur, ikincil ve aynı thead sabit konumlandırılmış. Hücreler genişlikleri de js ile ayarlanır.

Gereksinimlerinize göre kodu ayarlayın.

CSS

thead.fixed { 
    position: fixed; 
} 

HTML

<div style="overflow: auto;"> 
    <table id="my_table"> 
    <thead> 
     <tr> 
     <th>Head 1</th> 
     <th>Head 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Body 1</td> 
     <td>Body 2</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

jQuery

$(function() { 
    fixListThead(); 
}); 
$(window).resize(function() { 
    fixListThead(); 
}); 
var fixListThead = function() { 
    $('#my_table thead.fixed').remove(); // Removes (if present) fixed thead when resizing 
    var widths = []; 
    $('#my_table thead th').each(function(i, element) { 
    widths[i] = $(element).width(); 
    }); 
    $('<thead class="fixed">' + $('#my_table thead').html() + '</thead>').insertAfter($('#my_table thead')); 
    $('#my_table thead.fixed th').each(function(i, element) { 
    $(element).css('width', widths[i] + 'px'); 
    }); 
} 

Answer 5

kullanma CSS daha basit olabilir dönüşümü:

-webkit-transform','translateY(0px)'