表：滚动期间修复thead

时间：2016-07-27 12:57:09

标签： javascript jquery css

我正在尝试在表格滚动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;
}

编辑：我也尝试了这个结果

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

3 个答案:

答案 0 :(得分：0)

你能不能给桌子上一个overflow: sroll？

在stackoverflow的另一篇文章中解释了这一点。

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

答案 1 :(得分：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

答案 2 :(得分：0)

您可以通过jQuery clone() thead（以避免高度计算）＆amp;将其设置在绝对位置。 DEMO to play with

＆＃13;
＆＃13; 
$("#tablepress-10 thead").clone().prependTo("#tablepress-10");
＆＃13; 
.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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题