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

我一直在试图找出这个问题，我已经与HTML / CSS的粘头+滚动条。 我们正在创build一个程序，在容器大小达到某个特定点时（取决于用户的分辨率），需要滚动条才能显示出来。

我在桌子的第二列强制一个最小宽度，所以桌子在某一点停止下降，迫使容器保持一定的宽度。 容器上的溢出显示水平滚动条。 一切工作正常。 一旦我添加第二个滚动条的垂直滚动，事情正在变得混乱。 有人有这个问题的解决scheme吗？ 我想在.table-body上有一个垂直的滚动条，但滚动条必须在外部容器上可见。

有没有一个很好的HTML / CSS解决scheme的固定头表？ 我一直在寻找一个星期，但只能find这种行为的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" width="100%" 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" width="100%" 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/

在此先感谢你们！

这不是一件容易的事情。 我已经想出了一个脚本解决scheme。 （我不认为这可以使用纯CSS完成）

HTML保持不变， CSS发生了一些变化，添加了JQuery代码。

工作小提琴 testing： IE10，IE9，IE8，FF，Chrome

顺便说一句：如果你有独特的元素，为什么不使用id的而不是类？ 我认为它提供了一个更好的select器性能。

解释如何工作：内容inner-container将跨越outer-container的整个空间（所以基本上，他不需要），但我把他留在那里，所以你不会需要改变你的DOM。

table-header相对定位，没有滚动（ overflow: hidden ），我们稍后将处理他的滚动。

table-body必须跨越inner-container的其余部分，所以我用脚本来确定要修复的高度。 （当你重新调整窗口的大小时dynamic地改变）没有一个固定的高度，滚动不会出现，因为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，一些脚本可以跳过： 较短的小提琴 （这在IE8上不起作用）

这是一个解决scheme，这不是一个CSS唯一的解决scheme 。 它与avrahamcool的解决scheme类似，它使用了几行jQuery，而不是改变高度和移动标题，它所做的只是改变tbody的宽度，这取决于父table的滚动距离对。

这个解决scheme的一个额外的好处是，它与一个语义上有效的HTML表格一起工作 。

它适用于所有最新的浏览器版本（IE10，Chrome，FF），就是这样，滚动function在旧版本上打破了。

但是，使用语义上有效的HTML表格会节省一天的时间，并确保表格仍然正常显示，只有滚动function在旧版浏览器上无效。

这里是一个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，使这个解决scheme在IE9中很好地降级 

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

这是一个jsFiddle，展示了这个解决scheme的IE9版本的很好的降级。

编辑 ：更新小提琴链接，以链接到小提琴的版本，其中包含修复注释中提到的问题。 只需添加最新版本的代码片段即可： 

 $('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>

在这么长时间之后，道歉回答这个问题，但是给出的解决scheme不适合我，我发现了一个更好的解决scheme。 这是最简单的方法来做到这一点与HTML（没有jQuery）：

在此之前，解决scheme摆脱了这个问题。 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>

并解释解决scheme：

  1. 你需要和封闭div没有溢出/滚动所需

  2. 一个包含带有overflow的头部表格的header div：隐藏以确保滚动条不被显示。 添加margin-right：16px以确保滚动条在同步时保留在其外部。

  3. 另一个div用于包含表logging和overflow-y：scroll。 请注意填充需要使滚动条右移头部。

  4. 而最重要的是神奇的js同步头文件和表格数据： 

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

在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这个部分。 否则这个答案变得非常冗长。

这几周来一直让我疯狂。 我find了一个适用于我的解决scheme，其中包括：

  1. 非固定的列宽度 – 它们在窗口大小调整时收缩和增长。
  2. 表需要时有一个水平滚动条，但不是时不时。
  3. 列的数量是无关紧要的 – 它会根据您需要的列数来确定。
  4. 不是所有的列都需要相同的宽度。
  5. 头一直走到右侧滚动条的末尾。
  6. 没有JavaScript！

…但有几个警告：

  1. 垂直滚动条不可见，直到您完全滚动到右侧。 鉴于大多数人都有滚动的轮子，这是一个可以接受的牺牲。

  2. 滚动条的宽度必须是已知的。 在我的网站上，我设置了滚动条宽度（我不是过分关心较老的，不兼容的浏览器），所以我可以计算div和table宽度，根据滚动条进行调整。

不要在这里发布我的代码，我会发布一个链接到jsFiddle。

修正了表头+向左/向右滚动 。

你可以使用下面的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; }

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

小提琴

这是HTML 

 <div class="outer-container"> <!-- absolute positioned container --> <div class="inner-container"> <div class="table-header"> <table id="headertable" width="100%" 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" width="100%" 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解决scheme。 如果我缺less更多的要点，请提及:)

    Interesting Posts

    如何获得一个固定的位置div与内容水平滚动？ 使用jQuery

    水平滚动的HTML表格（第一列固定）

    固定的位置，但相对于容器

    固定附件背景图像闪烁/消失在铬与css转换结合

    粘滞边栏：向下滚动时贴在底部，向上滚动时贴在顶部