2016-07-27 2 views
0

Я пытаюсь исправить thead сверху во время прокрутки таблицы here, без каких-либо результатов.Таблица: исправить thead во время прокрутки

Я попытался с помощью JS, как это, но не работает ...

<script> 
    document.getElementById("tablepress-10").addEventListener("scroll", function() { 
    var translate = "translate(0," + this.scrollTop + "px)"; 
    this.querySelector("thead").style.transform = translate; 
}); 
</script> 

и я также попробовал этот JS

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
    var table = $("#tablepress-10"); 

    $(window).scroll(function() { 
     var windowTop = $(window).scrollTop(); 

     if (windowTop > table.offset().top) { 
      $("thead", table).addClass("Fixed").css("top", windowTop); 
     } 
     else { 
      $("thead", table).removeClass("Fixed"); 
     } 
    }); 
}); 
</script> 

CSS:

#tablepress-10 thead.Fixed 
{ 
    position: absolute; 
} 

EDIT: я также пробовал это с нашими результатами

<script> 
    jQuery(document).ready(function($){ 
// Change the selector if needed 
var $table = $('table.tablepress-id-10'), 
    $bodyCells = $table.find('tbody tr:first').children(), 
    colWidth; 

// Adjust the width of thead cells when window resizes 
$(window).resize(function() { 
    // Get the tbody columns width array 
    colWidth = $bodyCells.map(function() { 
     return $(this).width(); 
    }).get(); 

    // Set the width of thead columns 
    $table.find('thead tr').children().each(function(i, v) { 
     $(v).width(colWidth[i]); 
    });  
}).resize(); // Trigger resize handler 
}); 
</script> 

CSS

Hvae вы какие-либо советы?

Спасибо совет: D

PS: Я использую Wordpress.

ответ

0

Проверьте с этим .. Вы должны использовать JQuery

HTML содержание должно быть в TBODY

<table class="scroll"> 
    <thead> 
     <tr> 
      <th>Head 1</th> 
      <th>Head 2</th> 
      <th>Head 3</th> 
      <th>Head 4</th> 
      <th>Head 5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Content 1</td> 
      <td>Content 2</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
     <tr> 
      <td>Content 1</td> 
      <td>Lorem ipsum dolor sit amet.</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
     <tr> 
      <td>Content 1</td> 
      <td>Content 2</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
     <tr> 
      <td>Content 1</td> 
      <td>Content 2</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
     <tr> 
      <td>Content 1</td> 
      <td>Content 2</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
     <tr> 
      <td>Content 1</td> 
      <td>Content 2</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
     <tr> 
      <td>Content 1</td> 
      <td>Content 2</td> 
      <td>Content 3</td> 
      <td>Content 4</td> 
      <td>Content 5</td> 
     </tr> 
    </tbody> 
</table> 

CSS Должно быть

table.scroll { 
    /* width: 100%; */ /* Optional */ 
    /* border-collapse: collapse; */ 
    border-spacing: 0; 
    border: 2px solid black; 
} 

JS должен быть его будет также изменять размер ручек

// Change the selector if needed 
var $table = $('table.scroll'), 
    $bodyCells = $table.find('tbody tr:first').children(), 
    colWidth; 

// Adjust the width of thead cells when window resizes 
$(window).resize(function() { 
    // Get the tbody columns width array 
    colWidth = $bodyCells.map(function() { 
     return $(this).width(); 
    }).get(); 

    // Set the width of thead columns 
    $table.find('thead tr').children().each(function(i, v) { 
     $(v).width(colWidth[i]); 
    });  
}).resize(); // Trigger resize handler 
+0

Я пытался (см первый пост), но не работает. Я написал что-то не так в JS? –

0

Вы можете, используя jQuery clone() thead (чтобы избежать расчета высоты) & установить его в абсолютное положение. DEMO to play with

$("#tablepress-10 thead").clone().prependTo("#tablepress-10");
.tbl-ctnr { 
 
    height: 80vh; 
 
    /* whatever*/ 
 
    width: 50%; 
 
    /* whatever*/ 
 
    min-width: 800px; 
 
    position: relative; 
 
    /* be reference for absolute child */ 
 
} 
 
.tbl-ctnr .buffer { 
 
    /* bring me a scrollbar if needed */ 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.tbl-ctnr table { 
 
    table-layout: fixed; 
 
    /* will spray evenly columns or will fixed width set in CSS to th/td */ 
 
    width: 100%; 
 
    /* fill the whole container wich is the one to size in the layout */ 
 
    border-collapse: collapse; 
 
} 
 
#tablepress-10 thead + thead {/* use the second in case jQuery is not loaded */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    display: table; 
 
    table-layout: fixed; 
 
    /* will spray evenly columns or will fixed width set in CSS to th/td */ 
 
    width: calc(100% - 1.05em); 
 
    /* stay away from the scrollbar */ 
 
} 
 
#tablepress-10 thead { 
 
    background: orange; 
 
    color:white; 
 
    text-align:left; 
 
} 
 
#tablepress-10 tr { 
 
    border-bottom: 1px solid; 
 
    height: 60px; 
 
    vertical-align: middle; 
 
} 
 
/* see me */ 
 
th,td {box-shadow:0 0 0 1px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tbl-ctnr"> 
 
    <!-- used as reference for absolute child --> 
 
    <div class="buffer"> 
 
    <!-- just to show the scroll bar without scrolling absolute child --> 
 
    <table id="tablepress-10" class="tablepress tablepress-id-10"> 
 
     <thead> 
 
     <!-- i'm going to be cloned so one of mine stays on sight --> 
 
     <tr class="row-1 odd"> 
 
      <th class="column-1">Typ</th> 
 
      <th class="column-2">Zimmer</th> 
 
      <th class="column-3">Etage</th> 
 
      <th class="column-4">Wohnfläche</th> 
 
      <th class="column-5">Loggia</th> 
 
      <th class="column-6">Netto 
 
      <br/>Mietzins</th> 
 
      <th class="column-7">NK/BK 
 
      <br/>akonto</th> 
 
      <th class="column-8">Brutto 
 
      <br/>Mietzins</th> 
 
      <th class="column-9">PDF</th> 
 
      <th class="column-10">Status</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody class="row-hover"> 
 
     <tr class="row-2 even"> 
 
      <td class="column-1">1</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">4</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'385.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'585.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ1.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-3 odd"> 
 
      <td class="column-1">2</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">4</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'595.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'810.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ2.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-4 even"> 
 
      <td class="column-1">3</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">4</td> 
 
      <td class="column-4">84.00 m²</td> 
 
      <td class="column-5">12 m²</td> 
 
      <td class="column-6">1'640.00</td> 
 
      <td class="column-7">225.00</td> 
 
      <td class="column-8">1'865.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ3.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-5 odd"> 
 
      <td class="column-1">4</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">4</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'580.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'795.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ4.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-6 even"> 
 
      <td class="column-1">5</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">4</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'375.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'575.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ5.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-7 odd"> 
 
      <td class="column-1">1</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">5</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'425.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'625.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ1.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-8 even"> 
 
      <td class="column-1">2</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">5</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'610.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'825.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ2.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-9 odd"> 
 
      <td class="column-1">3</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">5</td> 
 
      <td class="column-4">84.00 m²</td> 
 
      <td class="column-5">12 m²</td> 
 
      <td class="column-6">1'655.00</td> 
 
      <td class="column-7">225.00</td> 
 
      <td class="column-8">1'880.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ3.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-10 even"> 
 
      <td class="column-1">4</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">5</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'595.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'810.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ4.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-11 odd"> 
 
      <td class="column-1">5</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">5</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'415.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'615.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ5.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-12 even"> 
 
      <td class="column-1">1</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">6</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'435.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'635.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ1.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-13 odd"> 
 
      <td class="column-1">2</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">6</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'625.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'840.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ2.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-14 even"> 
 
      <td class="column-1">3</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">6</td> 
 
      <td class="column-4">84.00 m²</td> 
 
      <td class="column-5">12 m²</td> 
 
      <td class="column-6">1'665.00</td> 
 
      <td class="column-7">225.00</td> 
 
      <td class="column-8">1'890.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ3.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-15 odd"> 
 
      <td class="column-1">4</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">6</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'610.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'825.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ4.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-16 even"> 
 
      <td class="column-1">5</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">6</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'425.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'625.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ5.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 

 
     <tr class="row-67 odd"> 
 
      <td class="column-1">1</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">17</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'560.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'760.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ1.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-68 even"> 
 
      <td class="column-1">2</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">17</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'775.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'990.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ2.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-69 odd"> 
 
      <td class="column-1">3</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">17</td> 
 
      <td class="column-4">84.00 m²</td> 
 
      <td class="column-5">12 m²</td> 
 
      <td class="column-6">1'825.00</td> 
 
      <td class="column-7">225.00</td> 
 
      <td class="column-8">2'050.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ3.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-70 even"> 
 
      <td class="column-1">4</td> 
 
      <td class="column-2">3.5</td> 
 
      <td class="column-3">17</td> 
 
      <td class="column-4">80.00 m²</td> 
 
      <td class="column-5">7 m²</td> 
 
      <td class="column-6">1'760.00</td> 
 
      <td class="column-7">215.00</td> 
 
      <td class="column-8">1'975.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ4.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">verfügbar</td> 
 
     </tr> 
 
     <tr class="row-71 odd"> 
 
      <td class="column-1">5</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">17</td> 
 
      <td class="column-4">68.00 m²</td> 
 
      <td class="column-5">10 m²</td> 
 
      <td class="column-6">1'550.00</td> 
 
      <td class="column-7">200.00</td> 
 
      <td class="column-8">1'750.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ5.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-72 even"> 
 
      <td class="column-1">6</td> 
 
      <td class="column-2">4.5</td> 
 
      <td class="column-3">18</td> 
 
      <td class="column-4">152.00 m²</td> 
 
      <td class="column-5">17 m²</td> 
 
      <td class="column-6">3'165.00</td> 
 
      <td class="column-7">355.00</td> 
 
      <td class="column-8">3'520.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ6.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">verfügbar</td> 
 
     </tr> 
 
     <tr class="row-73 odd"> 
 
      <td class="column-1">7</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">18</td> 
 
      <td class="column-4">94.00 m²</td> 
 
      <td class="column-5">12 m²</td> 
 
      <td class="column-6">2'295.00</td> 
 
      <td class="column-7">235.00</td> 
 
      <td class="column-8">2'530.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ7.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">verfügbar</td> 
 
     </tr> 
 
     <tr class="row-74 even"> 
 
      <td class="column-1">8</td> 
 
      <td class="column-2">4.5</td> 
 
      <td class="column-3">18</td> 
 
      <td class="column-4">144.00 m²</td> 
 
      <td class="column-5">17 m²</td> 
 
      <td class="column-6">3'000.00</td> 
 
      <td class="column-7">335.00</td> 
 
      <td class="column-8">3'335.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ8.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">verfügbar</td> 
 
     </tr> 
 
     <tr class="row-75 odd"> 
 
      <td class="column-1">6</td> 
 
      <td class="column-2">4.5</td> 
 
      <td class="column-3">19</td> 
 
      <td class="column-4">152.00 m²</td> 
 
      <td class="column-5">17 m²</td> 
 
      <td class="column-6">3'730.00</td> 
 
      <td class="column-7">355.00</td> 
 
      <td class="column-8">4'085.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ6.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">verfügbar</td> 
 
     </tr> 
 
     <tr class="row-76 even"> 
 
      <td class="column-1">7</td> 
 
      <td class="column-2">2.5</td> 
 
      <td class="column-3">19</td> 
 
      <td class="column-4">94.00 m²</td> 
 
      <td class="column-5">12 m²</td> 
 
      <td class="column-6">2'375.00</td> 
 
      <td class="column-7">235.00</td> 
 
      <td class="column-8">2'610.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ7.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">vermietet</td> 
 
     </tr> 
 
     <tr class="row-77 odd"> 
 
      <td class="column-1">8</td> 
 
      <td class="column-2">4.5</td> 
 
      <td class="column-3">19</td> 
 
      <td class="column-4">144.00 m²</td> 
 
      <td class="column-5">17 m²</td> 
 
      <td class="column-6">3'480.00</td> 
 
      <td class="column-7">335.00</td> 
 
      <td class="column-8">3'815.00</td> 
 
      <td class="column-9"><a href="/pdf/infoblatt/Infoblatt_Wohnung_Typ8.pdf" class="pdf-link" target="_blank" /> 
 
      </td> 
 
      <td class="column-10">verfügbar</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div>