Question

我在div中有一个大表，它有一个溢出自动定义。我仍然只能看到一个垂直滚动条。水平滚动条位于div的底部，这使得使用起来非常不方便。任何想法在这里发生了什么？！

Answer 1

这样的事情怎么样？

＆＃13;

$("#scrollbar").on("scroll", function(){
  var container = $("#container");
  var scrollbar = $("#scrollbar");
  
  ScrollUpdate(container, scrollbar);
});

function ScrollUpdate(content, scrollbar){
    $("#spacer").css({"width":"500px"}); // set the spacer width
    scrollbar.width = content.width() + "px";
    content.scrollLeft(scrollbar.scrollLeft());
}

ScrollUpdate($("#container"),$("#scrollbar"));

$("#tab").tableHeadFixer({
  "left": 1,
  "right": 0,
  "head": true
});

＆＃13;

#container {
  width: 300px;
  height: 300px;
  background: green;
  overflow-x: hidden !important;
  overflow-y: auto;
  position: absolute;
  left: 0px;
  top: 0px;
}

#scrollbar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
  z-index: 10;
}

#spacer {
  height: 1px;
}

#tab {
  width: 500px;
  height: 500px;
  background: #CCCCCC;
}

tr,td {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>

<div id="scrollbar"><div id="spacer"></div></div>

<div id="container">
  <table id="tab">
    <thead>
				<tr>
					<th>Title</th>
					<th>Name</th>
					<th>History</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>test</td>
					<td>test</td>
					<td>test</td>
				</tr>
				<tr>
					<td>test</td>
					<td>test</td>
					<td>test</td>
				</tr>
				<tr>
					<td>test</td>
					<td>test</td>
					<td>test</td>
				</tr>
				<tr>
					<td>test</td>
					<td>test</td>
					<td>test</td>
				</tr>
			</tbody>
  </table>
</div>

＆＃13;

div内的表 - 仅在div底部的水平滚动条

1 个答案: