首页
学习
活动
专区
工具
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>

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

复制
相关文章

相似问题

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