Scrolling Table Fluid Width and Height

by doctorDestructo

HTML

<body>
	<div class="scrollingtable">
		<div>
			<div>
				<table>
					<caption>Top Caption</caption>
					<thead>
						<tr>
            <th><div label="Column 1"></div></th>
            <th><div label="Column 2"></div></th>
            <th><div label="Column 3"></div></th>
							<th>
								<!--more versatile way of doing column label; requires 2 identical copies of label-->
								<div><div>Column 4</div><div>Column 4</div></div>
							</th>
              <th class="scrollbarhead"></th> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
						</tr>
					</thead>
					<tbody>
						<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
					</tbody>
				</table>
			</div>
			Faux bottom caption
		</div>
	</div>
</body>
<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->

CSS

/*the following html and body rule sets are required only if using a % width or height*/
html {
	width: 100%;
	height: 100%;
}
body {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 20px 0 20px;
  text-align: center;
  background: white;
}
.scrollingtable {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	width: auto; /*if you want a fixed width, set it here, else set to auto*/
	min-width: /*0*/100%; /*if you want a % width, set it here, else set to 0*/
	height: /*188px*/100%; /*set table height here; can be fixed value or %*/
	min-height: /*0*/104px; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 15px;
	line-height: 20px;
	padding: 20px 0 20px 0; /*need enough padding to make room for caption(s)*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
	position: relative;
	border-top: 1px solid black;
	height: 100%;
	padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
	top: 0;
	background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 50%;
	left: 0;
}
.scrollingtable > div > div {
	min-height: /*0*/43px; /*if using % height, make this large enough to fit scrollbar arrows*/
	max-height: 100%;
	overflow: /*scroll*/auto; /*set to auto if using fixed or % width; else scroll*/
	overflow-x: hidden;
	border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
	width: 100%;
	border-spacing: 0;
	margin-top: -20px; /*inverse of column header height*/
	margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
	position:...

JavaScript

/* THIS JAVASCRIPT JUST ADDS ROWS FOR TESTING PURPOSES */
(function() {
  for(var n=8, r=document.querySelector("tbody>tr"), p=r.parentNode; n--; p.appendChild(r.cloneNode(true)));
})();