文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >水平滚动时HTML表头与表体不在一行

问水平滚动时HTML表头与表体不在一行
EN

Stack Overflow用户
提问于 2015-10-04 10:30:57
回答 2查看 1.5K关注 0票数 2

在页面的中心放置一个html表格。当垂直滚动时，表格具有固定的标题，但是当垂直滚动时，标题不会与表格的正文一起滚动。该表如下所示。

这是在页面加载之后。

​

向右水平滚动后的表格。请注意，表头与正文之间存在偏移。

​

表格在水平滚动到标题不是从一开始的left.Note之后。

​

代码如下所示。

​

代码语言：javascript
复制
$(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());
}
代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<!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>

​

javascript
jquery
html
css
html-table
EN

回答 2

Stack Overflow用户

发布于 2015-10-04 11:00:33

问题是您在html代码中创建了两个表，一个用于标题，另一个用于正文，这会导致偏移量。

票数 0
EN

Stack Overflow用户

发布于 2015-12-22 17:03:52

我意识到@Shehary的解决方案只适用于LTR表，并且给定的函数

代码语言：javascript
复制
    $(".table-body").scroll(function () {
    $(".table-header").offset({
        left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
    });
});

对我不起作用。

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

另外，我用百分比定义了列的宽度，所以我可以有一个响应更快的表。所以如果你能接受最小宽度的约束，这是一个纯粹的CSS解决方案。

Fiddle

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32929460

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档