CODEWITHSUNDEEP
scrollbar
Marianne Sjöberg
Marianne Sjöberg

Reputation: 79

Table inside a div - horizontal scrollbar only at the bottom of the div

I have a big table inside a div that has a overflow-auto defined. Still I can get only a vertical scrollbar visible. The horizontal scrollbar is at the bottom at the div, which makes it quite inconvenient to use. Any ideas what is happening here?!

Upvotes: 0

Views: 272

Answers (1)

Icewine
Icewine

Reputation: 1851

How about something like this?

$("#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
});
#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;
}
<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>

Upvotes: 1

Related Questions