水平滚动时，HTML表格标题与表格主体不符

时间：2015-10-04 02:30:57

标签： javascript jquery html css html-table

将html表放在页面中央。当垂直滚动时，该表具有固定的标题，但是当垂直滚动时，标题不会与表的主体一致地滚动。该表如下所示。

这是在页面加载之后。 enter image description here

向右水平滚动后的表格。请注意 桌头偏离身体。 enter image description here

向左水平滚动后的表。注意标题不是从One开始。 enter image description here

代码如下所示。

＆＃13;
＆＃13; 
$(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());
}
＆＃13; 
* {
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
.outer-container {
  background-color: #ccc;
  position: absolute;
  top: 10em;;
  left: 10em;
  right: 200em;
  bottom: 40em;
  height:400px;
  width:500px;
}
.inner-container {
  height: 100%;
  overflow: hidden;
  position:relative;
}
.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;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='scroll.js'></script>
</head>
<body>
<header> 
<a href="/datacentre/index.php" title="Return to the homepage" id="logo">
  <img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo" 
  style="width:30px;height:30px;"/>
</a>
<span class="headerspan">CAGD Data Centre</span>
<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
  help
</a>
</header>
<section id="content">
<div class="outer-container">
  <div class="inner-container">
	<div class="table-header">
	  <table id="headertable">
		<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">
		<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>
		</tbody>
	  </table>
	</div>
  </div>
</div>
</section>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

您可以使用纯CSS实现相同的效果和行为

HTML表格标题符合水平滚动的表格主体

OP指出，使用Pure CSS时，表格的标题将不会被修复，并且当向下滚动到表格体时向桌面主体移动到jQuery解决方案，

在用代码敲打我的头后，意识到问题表标题跳转到左边并且没有与left:10em选择器中的outer-container属性导致的表体对齐，所以很容易解决的问题是计算10em中的px等于160px并向左滚动时调整边距。

function setTableBody() {
    $(".table-body").height(
    $(".inner-container").height() - $(".table-header").height());
}

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

Fiddle

更好的替代

让jQuery为你做所有的工作并动态计算outer-container左边距。

function setTableBody() {
    $(".table-body").height(
    $(".inner-container").height() - $(".table-header").height());
}

$(document).ready(function () {
    var marginLeft = $(".outer-container").position().left; //Create var and calculate the difference from left
    setTableBody();
    $(window).resize(setTableBody);
    $(".table-body").scroll(function () {
        $(".table-header").offset({
            left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
        });
    });
});
* {
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse;
}
.outer-container {
    background-color: #ccc;
    position: absolute;
    top: 5em;
    left: 10em;
    right: 200em;
    bottom: 40em;
    height:200px;
    width:500px;
}
.inner-container {
    height: 100%;
    overflow: hidden;
    position:relative;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a href="/datacentre/index.php" title="Return to the homepage" id="logo">
  <img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo" 
  style="width:30px;height:30px;"/>
</a>

<span class="headerspan">CAGD Data Centre</span>

<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
  help
</a>

    <section id="content">
        <div class="outer-container">
            <div class="inner-container">
                <div class="table-header">
                    <table id="headertable">
                        <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">
                        <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>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

Fiddle 2

答案 1 :(得分：0)

问题是你在html代码中创建了两个表，一个用于标题，一个用于主体，这会导致偏移。

答案 2 :(得分：0)

我意识到@ Shehary的解决方案仅适用于LTR表和给定的功能

    $(".table-body").scroll(function () {
    $(".table-header").offset({
        left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
    });
});

对我不起作用。

我通过更改容器的最小宽度以避免水平滚动来实现它，这样水平滚动就是窗口的滚动，并且没有重新调整大小的问题或计算。

另外，我用百分比定义了列的宽度，所以我可以有一个响应更快的表。 因此，如果您可以使用最小宽度约束，那么这是一个纯CSS解决方案。

Fiddle

相关问题
最新问题