浏览器在滑动滚动条的时候画面一直闪?像水平波纹一样,这是为啥啊?怎么样改变卅?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器在滑动滚动条的时候画面一直闪?像水平波纹一样,这是为啥啊?怎么样改变卅?相关的知识,希望对你有一定的参考价值。

桌面空白处弹右键→单击“属性”→单击“设置”→单击“高级”→单击“监视器”→看看“屏幕刷新频率中有没有60赫兹、70赫兹、75赫兹、85赫兹,有的话选择75赫兹或85赫兹(请按照以下图例中的1、2、3、4顺序操作完成)。

如果这里只有“使用硬件默认设备”,你就要用主板自带的驱动盘重新安装视频控制器的驱动,这个驱动文件名叫“VIA Chr Omeg Hc IGP Family”,你不知道哪个是视频控制器的驱动,就全部都安装吧,重新启动电脑后,又再按照以上步骤设置“屏幕刷新频率为75赫兹或85赫兹即可。

如果你的主板没有带有驱动盘,你可到网上下载一个吧。

如图:
参考技术A 是不是从新装过系统了? 如果是 你没有装显卡驱动, 装异下显卡驱动就好了

修复了带有水平滚动条和垂直滚动条的标题表

【中文标题】修复了带有水平滚动条和垂直滚动条的标题表【英文标题】:Fixed header table with horizontal scrollbar and vertical scrollbar on 【发布时间】:2013-02-05 08:05:14 【问题描述】:

我一直在尝试解决 html/css 粘性标题 + 滚动条的问题。我们正在创建一个程序,该程序需要在容器大小达到某个点时显示滚动条(取决于用户的分辨率)。

我在表格的第二列强制设置最小宽度,因此表格在某个点停止减小并强制容器保持在某个宽度。容器上的溢出显示水平滚动条。一切正常。一旦我为垂直滚动添加了第二个滚动条,事情就会变得一团糟。有人有解决这个问题的方法吗?我想在 .table-body 上有一个垂直滚动条,但滚动条必须在外部容器上可见。

对于固定头表有没有好的 html/css 解决方案?我一直在寻找一个星期,但只能找到这种行为的jQuery插件。

这是我当前的 HTML:

<!DOCTYPE html>
<html>
<head>
    <title>fixed header prototyping</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">

    <div class="table-header">
        <table id="headertable"  cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="header-cell col1">One</th>
                    <th class="header-cell col2">Two</th>
                    <th class="header-cell col3">Three</th>
                    <th class="header-cell col4">Four</th>
                    <th class="header-cell col5">Five</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="table-body">
        <table id="bodytable"  cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>



</body>
</html>

我的 CSS 看起来像这样:

body 
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;

table 
    border-collapse: collapse; /* make simple 1px lines borders if border defined */

tr 
    width: 100%;


.outer-container 
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom:40px;
    overflow: hidden;


.inner-container 
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: scroll;
    overflow-y:hidden;

.table-header 
    float:left;
    width: 100%;

.table-body 
    float:left;
    height: 100%;
    width: inherit;
    overflow-y: scroll;

.header-cell 
    background-color: yellow;
    text-align: left;
    height: 40px;

.body-cell 
    background-color: blue;
    text-align: left;

.col1, .col3, .col4, .col5 
    width:120px;
    min-width: 120px;

.col2 
    min-width: 300px;

JSFiddle 示例 - http://jsfiddle.net/W8URM/

提前谢谢各位!

【问题讨论】:

你必须使用table吗?或者你可以使用类似div 的表格布局吗? 请检查解决方案是否合适。 【参考方案1】:

为此有一个 jquery 插件:jquery.floatThead

【讨论】:

【参考方案2】:

这是一个仅 HTML / CSS 的解决方案(带有一点 javascript)。

抱歉这么久后回答这个问题,但给出的解决方案不适合我,我找到了一个更好的解决方案。这是使用 HTML(无 jquery)的最简单方法:

在此之前,解决方案摆弄了这个问题。 https://jsfiddle.net/3vzrunkt/

<div>
    <div style="overflow:hidden;;margin-right:16px" id="headerdiv">
        <table id="headertable" style="min-width:900px" border=1>
            <thead>
                <tr>
                    <th style="width:120px;min-width:120px;">One</th>
                    <th style="width:420px;min-width:420px;">Two</th>
                    <th style="width:120px;min-width:120px;">Three</th>
                    <th style="width:120px;min-width:120px;">Four</th>
                    <th style="width:120px;min-width:120px;">Five</th>
                </tr>
            </thead>
        </table>
    </div>

    <div style="overflow-y:scroll;max-height:200px;" 
         onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;">
        <table id="bodytable" border=1 style="min-width:900px; border:1px solid">
            <tbody>
                <tr>
                    <td style="width:120px;min-width:120px;">body row1</td>
                    <td style="width:420px;min-width:420px;">body row2</td>
                    <td style="width:120px;min-width:120px;">body row2</td>
                    <td style="width:120px;min-width:120px;">body row2</td>
                    <td style="width:120px;min-width:120px;">body row2 en nog meer</td>
                </tr>
                :
                :
                :
                :

            </tbody>
        </table>
    </div>
</div>

并解释解决方案:

    你需要并且封闭 div 不需要溢出/滚动

    包含标题表的标题 div 带有溢出:隐藏以确保不显示滚动条。添加 margin-right:16px 以确保同步时滚动条位于其外部。

    另一个 div 用于包含表记录和溢出-y:scroll。请注意,要使滚动条向右移动标题,需要填充。

    还有最重要的是神奇的js同步表头数据:

     onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;"
    

【讨论】:

好主意,虽然我想要一个只使用这样的表格的替代方案 是否有可能扩展您的解决方案(没有 jQuery)也可以修复列(最后一个或第一个)?我试图设置位置:绝对但它是不可滚动的.. Cheers mate as css only solution 这就像一个魅力。 @Anshuman 想知道您是否可以帮助解决我的问题版本:***.com/questions/47073223/…?谢谢。 这不是仅 HTML/CSS 的解决方案,您有一个 onscroll,它是 JavaScript。【参考方案3】:

解决办法是用JS水平滚动顶部div,使其匹配底部div。

您必须非常小心确保顶部和底部的尺寸完全相同,例如您可能需要使 TD 和 TH 使用固定宽度。

这是一个小提琴https://jsfiddle.net/jdhenckel/yzjhk08h/5/

重要部分:CSS 使用

.head 
  overflow-x: hidden;
  overflow-y: scroll;
  width: 500px;

.lower 
  overflow-x: auto;
  overflow-y: scroll;
  width: 500px;
  height: 400px;

注意overflow-y的头部和下部必须相同。

还有 Javascript...

var head = document.querySelector('.head');

var lower = document.querySelector('.lower');

lower.addEventListener('scroll', function (e) 
  console.log(lower.scrollLeft);
  head.scrollLeft = lower.scrollLeft;
);

【讨论】:

【参考方案4】:

这是一个不是纯 CSS 的解决方案的解决方案。它与avrahamcool's solution 相似,因为它使用几行jQuery,但不是改变高度和移动标题,它所做的只是根据其父table 滚动的距离来改变tbody 的宽度沿着右边。

此解决方案的另一个好处是它可以与语义上有效的 HTML 表格一起使用

它适用于所有最新的浏览器版本(IE10、Chrome、FF),仅此而已,滚动功能在旧版本上会中断。

但是,您使用语义上有效的 HTML 表格这一事实将节省时间并确保表格仍然正确显示,只是滚动功能在旧版浏览器上不起作用。

这是一个 jsFiddle 用于演示目的。

CSS

table 
    width: 300px;
    overflow-x: scroll;
    display: block;

thead, tbody 
    display: block;

tbody 
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;

td, th 
    min-width: 100px;

JS

$("table").on("scroll", function () 
    $("table > *").width($("table").width() + $("table").scrollLeft());
);

我需要一个在 IE9 中可以很好地降级的版本(没有滚动,只是一个普通的表格)。在这里发布小提琴,因为它是一个改进的版本。您需要做的就是在tr 上设置一个高度。

额外的 CSS 使该解决方案在 IE9 中很好地降级

tr 
    height: 25px; /* This could be any value, it just needs to be set. */ 

这是一个 jsFiddle 演示了该解决方案在 IE9 版本中的良好降级。

编辑:更新了小提琴链接以链接到包含对 cme​​ts 中提到的问题的修复的小提琴版本。只需添加一个带有最新和最好版本的 sn-p:

$('table').on('scroll', function() 
  $("table > *").width($("table").width() + $("table").scrollLeft());
);
html 
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;


table 
  border-collapse: collapse;
  width: 300px;
  overflow-x: scroll;
  display: block;


thead 
  background-color: #EFEFEF;


thead,
tbody 
  display: block;


tbody 
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;


td,
th 
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AAAAAAAAAAAAAAAAAAAAAAAAAA</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
    </tr>
    <tr>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
    </tr>
    <tr>
      <td>Row 7</td>
      <td>Row 7</td>
      <td>Row 7</td>
      <td>Row 7</td>
      <td>Row 7</td>
    </tr>
    <tr>
      <td>Row 8</td>
      <td>Row 8</td>
      <td>Row 8</td>
      <td>Row 8</td>
      <td>Row 8</td>
    </tr>
    <tr>
      <td>Row 9</td>
      <td>Row 9</td>
      <td>Row 9</td>
      <td>Row 9</td>
      <td>Row 9</td>
    </tr>
    <tr>
      <td>Row 10</td>
      <td>Row 10</td>
      <td>Row 10</td>
      <td>Row 10</td>
      <td>Row 10</td>
    </tr>
  </tbody>
</table>

【讨论】:

非常简单和非常好的解决方案:),但是如果您需要在同一页面上使用两个或多个表,您可以实现以下代码:$(window).load(function() $('table').on('scroll', function () $(this).find(" &gt; *").width($(this).width() + $(this).scrollLeft()); ); ); 非常感谢 Mathijs 的想法。 我非常希望它能够完美运行,不幸的是,如果您在 IE 10 和 11 中单击滚轮进行鼠标移动滚动,它会在身体而不是头部进行水平滚动,并且不会'甚至不更新滚动条。关于如何解决这个问题的任何想法? 相同的解决方案,但没有多余的 CSS(演示 CSS 解决方案时的小可爱)jsfiddle.net/oozL98dx 在您的内容 > 100px 宽之前,这非常有效。那么TH宽度与对应的TD宽度不匹配。 @ebigood - 响应有点晚了 :) 但为了完成这项工作,您还必须稍微交换一下数学:jsfiddle.net/fp9jra43【参考方案5】:

这已经让我发疯了好几个星期。我找到了一个适合我的解决方案,包括:

    非固定列宽 - 它们会随着窗口大小的调整而缩小和增长。 表格在需要时有水平滚动条,但在不需要时没有。 列数无关紧要 - 它会根据您的需要调整到多少列。 并非所有列都需要具有相同的宽度。 标题一直到右侧滚动条的末尾。 没有javascript!

...但有几点需要注意:

    在您一直向右滚动之前,垂直滚动条不可见。鉴于大多数人都有滚轮,这是可以接受的牺牲。

    必须知道滚动条的宽度。在我的网站上,我设置了滚动条的宽度(我不太关心旧的、不兼容的浏览器),因此我可以计算 divtable 根据滚动条调整的宽度。

我不会在这里发布我的代码,而是发布一个指向 jsFiddle 的链接。

Fixed header table + scroll left/right.

【讨论】:

【参考方案6】:

您可以使用以下 CSS 代码..

body 
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;

table 
    border-collapse: collapse; /* make simple 1px lines borders if border defined */

tr 
    width: 100%;


.outer-container 
    background-color: #ccc;    
    top:0;
    left: 0;
    right: 300px;
    bottom:40px;
    overflow:hidden;


.inner-container 
    width: 100%;
    height: 100%;
    position: relative;


.table-header 
    float:left;
    width: 100%;

.table-body 
    float:left;
    height: 100%;
    width: inherit;


.header-cell 
    background-color: yellow;
    text-align: left;
    height: 40px;

.body-cell 
    background-color: blue;
    text-align: left;

.col1, .col3, .col4, .col5 
    width:120px;
    min-width: 120px;

.col2 
    min-width: 300px;

【讨论】:

【参考方案7】:

working example in jsFiddle

这可以使用 div 来实现。也可以用桌子来完成。但我总是更喜欢div。

<body id="doc-body" style="width: 100%; height: 100%; overflow: hidden; position: fixed" onload="InitApp()"> 
    <div>
        <!--If you don't need header background color you don't need this div.-->
        <div id="div-header-hack" style="height: 20px; position: absolute; background-color: gray"></div>

        <div id="div-header" style="position: absolute; top: 0px; overflow: hidden; height: 20px; background-color: gray">                
        </div>

        <div id="div-item" style="position: absolute; top: 20px; overflow: auto" onscroll="ScrollHeader()">                
        </div>
    </div>
</body>

Javascript: 这部分请参考 jsFiddle。否则这个答案会变得很冗长。

【讨论】:

@user1386906 您可以将自己的样式添加到网格单元格和行。【参考方案8】:

如果这是你想要的只有 HTML 和 CSS 解决方案

fiddle

这是 HTML

<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">

    <div class="table-header">
        <table id="headertable"  cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="header-cell col1">One</th>
                    <th class="header-cell col2">Two</th>
                    <th class="header-cell col3">Three</th>
                    <th class="header-cell col4">Four</th>
                    <th class="header-cell col5">Five</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="table-body">
        <table id="bodytable"  cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

这是css

body 
margin:0;
padding:0;
height: 100%;
width: 100%;

table 
    border-collapse: collapse; /* make simple 1px lines borders if border defined */

tr 
    width: 100%;


.outer-container 
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom:40px;
    overflow: scroll;


.inner-container 
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: visible;
    overflow-y:visible;

.table-header 
    float:left;
    width: 100%;

.table-body 
    float:left;
    height: auto;
    width: auto;
    overflow: visible;
    background-color: red;

.header-cell 
    background-color: yellow;
    text-align: left;
    height: 40px;

.body-cell 
    background-color: transparent;
    text-align: left;

.col1, .col3, .col4, .col5 
    width:120px;
    min-width: 120px;

.col2 
    min-width: 300px;

如果这是您需要的,请告诉我。或者有些东西不见了。我浏览了其他答案,发现已经使用了 jquery。我假设您需要 css 解决方案。如果我还有遗漏,请提及:)

【讨论】:

我认为你在这里错过了一件大事,标题没有粘住。【参考方案9】:

这不是一件容易的事。 我想出了一个脚本解决方案。 (我不认为这可以使用纯 CSS 来完成)

HTML 与您发布的内容保持一致,CSS 略有变化,添加了 JQuery 代码。

Working Fiddle 测试于: IE10、IE9、IE8、FF、Chrome

顺便说一句:如果您有独特的元素,为什么不使用 id 而不是类? 我认为它提供了更好的选择器性能。

解释它的工作原理: inner-container 将跨越 outer-container 的整个空间(所以基本上不需要他)但我把他留在那里,所以你不需要改变你的 DOM。

table-header是相对定位的,没有滚动条(overflow: hidden),我们稍后处理他的滚动条。

table-body 必须跨越其余的inner-container 高度,所以我使用脚本来确定修复他的高度。 (当您重新调整窗口大小时,它会动态变化) 没有固定高度,滚动不会出现,因为 div 只会变大。 请注意,如果您修复标题高度并使用CSS3(如答案末尾所示),则此部分可以在没有脚本的情况下完成

现在只需在每次滚动时将标题与正文一起移动。 这是由分配给scroll 事件的函数完成的。

CSS(其中一些是从您的样式中复制而来的)

*

    padding: 0;
    margin: 0;


body

    height: 100%;
    width: 100%;

table

    border-collapse: collapse; /* make simple 1px lines borders if border defined */

.outer-container

    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom: 40px;


.inner-container

    height: 100%;
    overflow: hidden;


.table-header

    position: relative;

.table-body

    overflow: auto;


.header-cell

    background-color: yellow;
    text-align: left;
    height: 40px;

.body-cell 

    background-color: blue;
    text-align: left;

.col1, .col3, .col4, .col5

    width:120px;
    min-width: 120px;

.col2

    min-width: 300px;

JQuery

$(document).ready(function () 
    setTableBody();
    $(window).resize(setTableBody);
    $(".table-body").scroll(function ()
    
        $(".table-header").offset( left: -1*this.scrollLeft );
    );
);

function setTableBody()

    $(".table-body").height($(".inner-container").height() - $(".table-header").height());

如果您不关心修复标题高度(我看到您在 CSS 中修复了单元格的高度),如果您使用 CSS3 可以跳过某些脚本:Shorter Fiddle(这在 IE8 上不起作用)

【讨论】:

点赞!我同意你的观点,这是纯 CSS 无法实现的。恕我直言,您的解决方案正是所要求的。原始标记在语义上已经不是很明确了,因为拆分表的 theadtbody,加上将每个表包装在 DIV 中对我来说看起来并不“正确”。 我的页面中也有类似的工具,但有一个问题困扰着我:如何处理 rtl 方向的页面,scrollLeft 不再适用? @Zen 不用多想,我想说你可以用right: -1*this.scrollRight 替换left: -1*this.scrollLeft。发布一个相关的小提琴,我们将从那里继续。 @kikovi 您的演示效果不佳。标题隐藏了第一行内容,滚动时我们可以透过标题看到,只有滚动到底部才能看到底部滚动。 @avrahamcool 你是对的。我没有完全完善这个演示,因为它已经适合我的需要了。这是完善的版本,如果有人需要的话:jsfiddle.net/kq1gzzmm。底部滚动取决于容器高度,并且标题设置为相对位置,因此它不会隐藏第一个内容行。

以上是关于浏览器在滑动滚动条的时候画面一直闪?像水平波纹一样,这是为啥啊?怎么样改变卅?的主要内容,如果未能解决你的问题,请参考以下文章

我家电脑鼠标一滑动屏幕就像水波纹一样,为啥?

C#,winform程序中datagridview控件使用多层表头,由于表头项太多,拖动滚动条的时候一直闪,请教高手

几个 UICollectionViews 像 iBooks 一样水平滚动

java中JScrollPane不显示水平滚动条的解决办法

为啥我拉滚动条的时候屏幕抖动的厉害,象波浪一样的?

如何在没有滚动条的 Tailwind 中创建可滚动元素