tableタグに関して横スクロールで一番左の列を固定したい

Question

下記のようなソースで「ヘッダ」という文字の列を固定して横スクロールさせたいと思っております。
色々調べてみたのですが横の列を固定させることがうまくできず、ぜひともご教授願いたいです。

<div style="overflow-x:scroll; overflow-y:scroll; padding:0px; height:400px;">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th >&nbsp;</th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
		</thead>
		<tbody>
				<tr>
					<td >ヘッダ</td>
					<td>りんご</td>
					<td>りんご</td>
					<td>りんご</td>
				</tr>
				<tr>
					<td>ヘッダ</td>
					<td>ばなな</td>
					<td>ばなな</td>
					<td>ばなな</td>
				</tr>
	</table>
</div>

Answer 1

期待する動作は MS Excel の [ウインドウ枠の固定] に相当する機能でしょうか。
http://codepen.io/jgx/pen/wiIGc

行固定なら簡単ですが、列固定に関してはやや面倒ですね。
position: fixed; で固定できますが、行と違って <tr> で括る事が出来ないので。
実装手段としては列だけの <table> を上に重ねて table { overflow-x:scroll; } で table 全体をスクロールさせるぐらいでしょうか。

Answer 2

HTMLにはそのような機能は無いので、javascriptなどを使用して実現します。
参考URL
0から作るのはとても難しいので、参考URLで使用しているような既存ライブラリを利用するのがいいかと思います。