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

我一直在试图找出这个问题,我已经与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/

在此先感谢你们!

7 Solutions collect form web for “修复了水平滚动条和垂直滚动条的标题表”

这不是一件容易的事情。 我已经想出了一个脚本解决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. 滚动条的宽度必须是已知的。 在我的网站上,我设置了滚动条宽度(我不是过分关心较老的,不兼容的浏览器),所以我可以计算divtable宽度,根据滚动条进行调整。

不要在这里发布我的代码,我会发布一个链接到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更多的要点,请提及:)

  • 表格内的forms
  • 如何将HTML表格转换为CSV?
  • 删除HTML表格中的所有行
  • 我怎么能让桌子的身体滚动,但保持其头部固定的位置?
  • HTML表格到Excel的Javascript
  • 创build链接到csv文件的表格
  • 在CSS中设置cellpadding和cellspacing?
  • select除CSS中第一个“tr”之外的所有“tr”元素
  • 用HTML和CSS滚动表格
  • 在TD中使用位置相对/绝对?
  • AngularJS按表头对行进行sorting