固定表标题与响应表不起作用

时间：2019-06-18 08:40:11

标签： 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 个答案:

答案 0 :(得分：1)

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>

答案 1 :(得分：1)

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

答案 2 :(得分：0)

如果您不需要旧版浏览器，则可以使用position: sticky。粘性是CSS-3中的强大属性，了解position sticky link for sticky

如果您需要旧的浏览器支持，则可以使用jquery sticky table header cross browser 

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>

相关问题
最新问题