那些遇到过的问题

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

use*_*854 5 html javascript 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];
  }
Run Code Online (Sandbox Code Playgroud) 

<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];
  }
Run Code Online (Sandbox Code Playgroud) 
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];
    }

  }
}
Run Code Online (Sandbox Code Playgroud) 
.scroll {
  position: fixed;
  top: 0 !important;
}

#myDIV {
  background-color: #ccc;
}

header {
  height: 100px;
}

footer {
  height: 2000px;
}
Run Code Online (Sandbox Code Playgroud)

Geo*_*ang 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];
    }

  }
}
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • 总是很乐意解释您的解决方案，而不是仅仅发布代码。 (4认同)
  • 您需要设置表格的宽度，并使用“block”和其他宽度选项设置“display”属性。 (2认同)

归档时间：

查看次数：

1425 次

最近记录：

6 年，7 月 前
表固定标题和可滚动的主体 207
更多相关链接
相关归档
如何删除html超链接'a'标签的默认链接颜色？ 211
计算数组元素的出现次数/频率 195
Angular 2 Karma Test'component-name'不是已知元素 81
使用UI-Router转换到父状态时将用户定向到子状态 76
如何在PHP中创建websockets服务器 75
Gmail显示图片之间的差距 27
如何在滚动时添加顶部和底部阴影,但仅在需要时添加？ 20
CSS3转换:在IE中扩展 18
如何在Javascript/jQuery中的DIV中实现无限/无限滚动 18
为什么不顶部:0相对于身体的绝对定位元素？ 17
难疑归档
如何在另一个JavaScript文件中包含JavaScript文件？ 4904
在字典中添加新密钥？ 2427
如何在不手动指定编码的情况下在C#中获得字符串的一致字节表示？ 2121
打印Java数组最简单的方法是什么？ 1852
根据pandas中列的值从DataFrame中选择行 1649
什么是移动语义？ 1614
如何克隆仅Git存储库的子目录？ 1298
URL.Combine的URL？ 1186
什么是Python 3相当于"python -m SimpleHTTPServer" 1124
git:撤消所有工作目录更改,包括新文件 1108