Sabit başlıklar ile HTML tablo?

SORU

23 Mart 2009, PAZARTESİ

Sabit başlıklar ile HTML tablo?

Orada uzun bir HTML tablo sütun başlıkları sabit kalmak gibi bir ekran görüntüsü ile çapraz tarayıcı CSS/JavaScript tekniği ve tablo gövdesi ile ilerleyin. ""Etkin Microsoft Excel. bölmeleri dondur düşün

Tablo içeriğini kaydırmak için mümkün olmak istiyorum, ama her zaman en üstünde sütun başlıkları görmek mümkün.

CEVAP

11 EKİM 2011, Salı

Bir süre bunun için bir çözüm arıyordum ve cevapları en durumum için çalışan ya da değil uygun değildir dil eklentisi ile basit bir çözüm yazdım.

bu çözüm taslağı.

klon başlık ve yere sabit olması gereken tablo orijinal üstüne klonlanmış kopyası
top masadan masaya vücut kaldırın
alt tablo tablo Başlığı çıkarın
sütun genişliği ayarlayın. (orijinal sütun genişliklerini anıyoruz)

aşağıdaki kodu. işte demo Fixed Header Demo

<head>
    <script   
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
    </script>
    <script>

    function scrolify(tblAsJQueryObject, height){
        var oTbl = tblAsJQueryObject;

        // for very large tables you can remove the four lines below
        // and wrap the table with <div> in the mark-up and assign
        // height and overflow property  
        var oTblDiv = $("<div/>");
        oTblDiv.css('height', height);
        oTblDiv.css('overflow','scroll');               
        oTbl.wrap(oTblDiv);

        // save original width
        oTbl.attr("data-item-original-width", oTbl.width());
        oTbl.find('thead tr td').each(function(){
            $(this).attr("data-item-original-width",$(this).width());
        }); 
        oTbl.find('tbody tr:eq(0) td').each(function(){
            $(this).attr("data-item-original-width",$(this).width());
        });                 


        // clone the original table
        var newTbl = oTbl.clone();

        // remove table header from original table
        oTbl.find('thead tr').remove();                 
        // remove table body from new table
        newTbl.find('tbody tr').remove();   

        oTbl.parent().parent().prepend(newTbl);
        newTbl.wrap("<div/>");

        // replace ORIGINAL COLUMN width                
        newTbl.width(newTbl.attr('data-item-original-width'));
        newTbl.find('thead tr td').each(function(){
            $(this).width($(this).attr("data-item-original-width"));
        });     
        oTbl.width(oTbl.attr('data-item-original-width'));      
        oTbl.find('tbody tr:eq(0) td').each(function(){
            $(this).width($(this).attr("data-item-original-width"));
        });                 
    }

    $(document).ready(function(){
        scrolify($('#tblNeedsScrolling'), 160); // 160 is height
    });


    </script>


</head>

<body>
    <div style="width:300px;border:6px green solid;">
        <table border="1" width="100%" id="tblNeedsScrolling">
            <thead>
                <tr><th>Header 1</th><th>Header 2</th></tr>
            </thead>
            <tbody>
                <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
                <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>           
            </tbody>
        </table>
    </div>

</body>