Scrolling Table Auto Width Fixed Height

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

html {
	/*width: 100%;*/ /*required if using % width*/
	/*height: 100%;*/ /*required if using % height*/
}
body {
	/*width: 100%;*/ /*required if using % width*/
	/*height: 100%;*/ /*required if using % height*/
	/*margin: 0;*/ /*required if using % width or height*/
	/*padding: 0 20px 0 20px;*/ /*purely aesthetic, not required*/
  /*box-sizing: border-box;*/ /*required if using above declaration*/
  background: white;
	text-align: center; /*delete if using % width, or you don't want table centered*/
}
.scrollingtable {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	width: auto; /*set table width here if using fixed value*/
	/*min-width: 100%;*/ /*set table width here if using %*/
	height: 188px; /*set table height here; can be fixed value or %*/
	/*min-height: 104px;*/ /*if using % height, make this at least large enough to fit scrollbar arrows + captions + thead*/
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 15px;
	line-height: 20px;
	padding-top: 20px; /*this determines top caption height*/
	padding-bottom: 20px; /*this determines bottom caption height*/
	text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
	position: relative;
	border-top: 1px solid black; /*top table border*/
	height: 100%;
	padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
	top: 0;
	background: cornflowerblue; /*column header 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: 43px;*/ /*if using % height, make this at least large enough to fit scrollbar arrows*/
	max-height: 100%;
	overflow: scroll; /*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...