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

Posted 2023-03-05

技术标签:

【中文标题】修复了带有水平滚动条和垂直滚动条的标题表【英文标题】：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;

$("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 版本中的良好降级。

编辑：更新了小提琴链接以链接到包含对 cmets 中提到的问题的修复的小提琴版本。只需添加一个带有最新和最好版本的 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！

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

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

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

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

以上是关于修复了带有水平滚动条和垂直滚动条的标题表的主要内容，如果未能解决你的问题，请参考以下文章

带有固定标题垂直滚动条的表格是IE11中的Flickr

TreeView重绘后水平滚动条问题

excel表格怎么设置滚动条

MFC 控件编程之水平滚动条跟垂直滚动条

如何从 ListView 的右边缘设置垂直滚动条的边距？

同时具有水平和垂直滚动条的 Android GridView