固定的标题表，带有水平滚动条和垂直滚动条

我一直试图找出这个问题，我有与 html/css 粘贴头 + 滚动条。我们正在创建一个程序，需要滚动条显示一次容器大小达到一定的点(取决于用户的分辨率)。

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

对于固定的头表，有没有好的 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" 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/

先谢谢你们！

152029 次浏览
小开

这可不容易。 我已经想出了一个脚本解决方案(我不认为这可以用纯 CSS 完成)

超文本标示语言保持不变，CSS略有变化，增加了 JQuery代码。

工作小提琴 测试对象: 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: 短提琴(这不会工作在 IE8)

小开

这里有一个解决方案，也是 不是只有 CSS 的解决方案。它类似于 阿弗拉罕库尔的解决方案，因为它使用了几行 jQuery，但是它没有改变高度和移动标题，而是根据其父 table向右滚动的距离来改变 tbody的宽度。

此解决方案的另一个好处是，它可以使用语义有效的 HTML 表 。

它适用于所有最新的浏览器版本(IE10，Chrome，FF) ，仅此而已，滚动功能在旧版本中不起作用。

但是，如果您使用的是一个语义有效的 HTML 表，那么就可以节省时间，并确保该表仍然能够正确显示，只是滚动功能在旧版浏览器上无法正常工作。

这里是一个 jsFiddle的演示目的。

CSS

table {
width: 300px;
overflow-x: scroll;
display: block;
}
thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td, th {
min-width: 100px;
}

JS

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

我需要一个版本，降低在 IE9很好(没有滚动，只是一个普通的表)。在这里张贴小提琴，因为它是一个改进的版本。你所需要做的就是在 tr上设置一个高度。

附加的 CSS 可以使这个解决方案在 IE9中很好地降级

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

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

编辑 : 更新小提琴链接，链接到包含修复评论中提到的问题的小提琴版本。我只是添加了一个最新最棒的版本:

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

小开

JsFiddle 中的工作示例

这可以通过使用 div 来实现，也可以通过使用 table 来实现，但是我总是更喜欢使用 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，否则这个答案会很长。

小开

你可以使用下面的 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 解决方案

小提琴

这是 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 解决方案。如果我还漏掉了什么，请提及:)

小开

下面是一个 HTML/CSS 解决方案(带有一些 javascript)。

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

在此之前，解决方案只是简单地回答这个问题

<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>

解释一下解决方案:

  1. 您需要并附上 div，不需要溢出/滚动

  2. 包含带溢出的头表的头 div: hide，以确保不显示滚动条。添加右边距: 16px，以确保滚动条在同步时位于其外部。

  3. 另一个 div 用于包含表记录和 overflow-y: 捲动。注意，要使滚动条移动到标题的右边，需要填充。

  4. 最重要的是，神奇的 js 可以同步头文件和表格数据:

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

这几周我都快被逼疯了。我找到了一个适合我的解决方案，包括:

  1. 非固定列宽-它们随着窗口大小的调整而收缩和增长。
  2. 表在需要时有一个水平滚动条，但在不需要时没有。
  3. 列的数量是不相关的-它将大小为多少列你需要它。
  4. 并非所有列的宽度都必须相同。
  5. 页眉一直延伸到右边滚动条的末尾。
  6. 没有 javascript！

但有几点需要注意:

  1. 直到向右滚动，垂直滚动条才可见。考虑到大多数人都有滚轮，这是一个可以接受的牺牲。

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

我将不在这里发布代码，而是发布到 jsFiddle 的链接。

固定头表 + 向左/向右滚动 。

小开

解决方案是使用 JS 水平滚动顶部的 div，使其与底部的 div 相匹配。

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

这是一把小提琴

重要部分: 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;
});
小开

这里有一个 jquery 插件: Jquery.floatThead

小开

我们都知道，维护自己的解决方案并不是最好的。我建议尝试 表头。这个模块启用了粘贴头，它也可以在表的水平滚动中工作。

此外，它与框架无关，没有依赖关系，更适合现代 SPA 前端框架。


提交答案