堆棧內存溢出
  簡體   English   中英

固定表格標題，響應表不起作用

[英]Fixed table header with responsive table not working

 原文  2019-06-18 08:40:11  9   3    javascript/ html/ css

問題描述

我正在嘗試修復我的表頭，一旦它向下滾動它固定在頂部位置。

我設法通過使用javascript來檢測滾動位置然后應用css使位置固定在頂部來修復標題

但是標題的列大小會丟失，顯然會變小。

如果有人能夠提供幫助，我將不勝感激？ 

<html>

<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
.scroll{
   position: fixed;
   top: 0 !important;
}

#myDIV{
   background-color: #ccc;
}

header{
   height: 100px;
}

footer{
   height: 2000px;
}
</style>
</header>
<body> 
<table style="width:1900px" >
        <thead id="myDIV">
            <tr>
                <th style="width:25%"  >Column1</th>
                <th  style="width:25%" >Column2</th>
                <th  style="width:25%" >Column3</th>
                <th  style="width:25%" >Column4</th>
            </tr>
        </thead>
        <tbody >
            <tr>
                <td style="width:25%" >aaaaaaaaaaa</td>
                <td style="width:25%" >bbbbbbbbbbb</td>
                <td style="width:25%" >ccccccccccc</td>
                <td style="width:25%">ddddddddddd</td>         
            </tr>
            <tr>
                <td>aaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
                <td>ccccccccccc</td>
                <td>ddddddddddd</td>
            </tr>
            <tr>
                <td>aaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
                <td>ccccccccccc</td>
                <td>ddddddddddd</td>
            </tr>
            <tr>
                <td>aaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
                <td>ccccccccccc</td>
                <td>ddddddddddd</td>
            </tr>
            <tr>
                <td>aaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
                <td>ccccccccccc</td>
                <td>ddddddddddd</td>
            </tr>
            <tr>
                <td>aaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
                <td>ccccccccccc</td>
                <td>ddddddddddd</td>
            </tr>
            <tr>
                <td>aaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
                <td>ccccccccccc</td>
                <td>ddddddddddd</td>
            </tr>
        </tbody>
    </table>

<p id="demo" style="background-color:yellow">testest</p>
</body>
<script> 

window.onload = function(){

 document.addEventListener("scroll", myFunction);
 var i = 0;
 function myFunction() {
   document.getElementById("demo").innerHTML = "You scrolled in div." + i++;

  var lastScroll = document.getScroll();
   if(lastScroll[1] >= 100){
    document.getElementById("myDIV").classList.add('scroll');
   } else {
    document.getElementById("myDIV").classList.remove('scroll');
   }

 }

 document.getScroll = function() {
  if (window.pageYOffset != undefined) {
   return [pageXOffset, pageYOffset];
  } else {
  var sx, sy, d = document,
   r = d.documentElement,
   b = d.body;
   sx = r.scrollLeft || b.scrollLeft || 0;
   sy = r.scrollTop || b.scrollTop || 0;
  return [sx, sy];
  }


 window.onload = function() { document.addEventListener("scroll", myFunction); var i = 0; function myFunction() { document.getElementById("demo").innerHTML = "You scrolled in div." + i++; var lastScroll = document.getScroll(); if (lastScroll[1] >= 100) { document.getElementById("myDIV").classList.add('scroll'); } else { document.getElementById("myDIV").classList.remove('scroll'); } } document.getScroll = function() { if (window.pageYOffset != undefined) { return [pageXOffset, pageYOffset]; } else { var sx, sy, d = document, r = d.documentElement, b = d.body; sx = r.scrollLeft || b.scrollLeft || 0; sy = r.scrollTop || b.scrollTop || 0; return [sx, sy]; } } } 
 .scroll { position: fixed; top: 0 !important; } #myDIV { background-color: #ccc; } header { height: 100px; } footer { height: 2000px; } 
 <html> <header> </header> <body> <table style="width:1900px"> <thead id="myDIV"> <tr> <th style="width:25%">Column1</th> <th style="width:25%">Column2</th> <th style="width:25%">Column3</th> <th style="width:25%">Column4</th> </tr> </thead> <tbody> <tr> <td style="width:25%">aaaaaaaaaaa</td> <td style="width:25%">bbbbbbbbbbb</td> <td style="width:25%">ccccccccccc</td> <td style="width:25%">ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> </tbody> </table> <p id="demo" style="background-color:yellow">testest</p> </body> <footer></footer>

3 個解決方案

解決方案1
 1 已采納  2019-06-18 08:55:22

 window.onload = function() { document.addEventListener("scroll", myFunction); var i = 0; function myFunction() { document.getElementById("demo").innerHTML = "You scrolled in div." + i++; var lastScroll = document.getScroll(); if (lastScroll[1] >= 100) { document.getElementById("myDIV").classList.add('scroll'); } else { document.getElementById("myDIV").classList.remove('scroll'); } } document.getScroll = function() { if (window.pageYOffset != undefined) { return [pageXOffset, pageYOffset]; } else { var sx, sy, d = document, r = d.documentElement, b = d.body; sx = r.scrollLeft || b.scrollLeft || 0; sy = r.scrollTop || b.scrollTop || 0; return [sx, sy]; } } } 
 table { width: 1900px; position: relative; } .scroll { position: fixed; top: 0 !important; width: 1900px; } .scroll tr { display: flex; } .scroll th { display: block; width: 100%; border-right: 2px solid white; } #myDIV { background-color: #ccc; } header { height: 100px; } footer { height: 2000px; } 
 <html> <header> </header> <body> <table style=""> <thead id="myDIV"> <tr> <th style="width:25%">Column1</th> <th style="width:25%">Column2</th> <th style="width:25%">Column3</th> <th style="width:25%">Column4</th> </tr> </thead> <tbody> <tr> <td style="width:25%">aaaaaaaaaaa</td> <td style="width:25%">bbbbbbbbbbb</td> <td style="width:25%">ccccccccccc</td> <td style="width:25%">ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> </tbody> </table> <p id="demo" style="background-color:yellow">testest</p> </body> <footer></footer>

解決方案2
 1  2019-06-18 09:33:04

 #myDIV{ background: #ddd; } #myDIV th{ text-align: left; } tbody { display:block; height:100px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed; } 
 <html> <header> </header> <body> <table style="width:1900px"> <thead id="myDIV"> <tr> <th style="width:25%">Column1</th> <th style="width:25%">Column2</th> <th style="width:25%">Column3</th> <th style="width:25%">Column4</th> </tr> </thead> <tbody> <tr> <td style="width:25%">aaaaaaaaaaa</td> <td style="width:25%">bbbbbbbbbbb</td> <td style="width:25%">ccccccccccc</td> <td style="width:25%">ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td style="width:25%">aaaaaaaaaaa</td> <td style="width:25%">bbbbbbbbbbb</td> <td style="width:25%">ccccccccccc</td> <td style="width:25%">ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> </tbody> </table> <p id="demo" style="background-color:yellow">testest</p> </body> <footer></footer>

解決方案3
 0  2019-06-18 09:06:39

如果您不需要舊的瀏覽器，您可以使用position: sticky 。 sticky是CSS-3中強大的屬性，了解position sticky 粘連

如果您需要舊的瀏覽器支持，可以使用jquery粘性表頭跨瀏覽器 

 table thead, table thead th { position: sticky; top: 0; background: #ccc; } header { height: 100px; } footer { height: 2000px; } 
 <html> <header> </header> <body> <table style="width:1900px"> <thead> <tr> <th style="width:25%">Column1</th> <th style="width:25%">Column2</th> <th style="width:25%">Column3</th> <th style="width:25%">Column4</th> </tr> </thead> <tbody> <tr> <td style="width:25%">aaaaaaaaaaa</td> <td style="width:25%">bbbbbbbbbbb</td> <td style="width:25%">ccccccccccc</td> <td style="width:25%">ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> <tr> <td>aaaaaaaaaaa</td> <td>bbbbbbbbbbb</td> <td>ccccccccccc</td> <td>ddddddddddd</td> </tr> </tbody> </table> <p id="demo" style="background-color:yellow">testest</p> </body> <footer></footer>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 具有固定標題的滾動表不起作用 具有固定列表的固定標題不響應寬度 禁用數據表固定標題以實現響應式設計 數據表修復 header 不適用於可滾動表 響應表移動，表頭 帶有固定標題的可滾動表格 數據表固定 header 固定水平表標題 具有固定標題和滾動的表格 修復了AngularJS中的頭表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM