表：滚动期间修复thead

Question

I am trying to fix the thead on top during table scroll here , without any results.

I tried via JS like this, but does not works...

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

and i also tried this 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: i also tried this withour results

<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 you any tips?

Thanks in advice :D

PS: I am using Wordpress .

Answer 1

Cant you give an overflow: sroll to the table body?

In another post on stackoverflow this is explained.

HTML table with 100% width, with vertical scroll inside tbody

Answer 2

Check with this.. You have to use jQuery

HTML Content Should be in 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 Should be

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

JS should be it will be handle resize also

// 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

Answer 3

You may, via jQuery clone() the thead (to avoid height calculation) & set it in absolute position. 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>