◆ スクロールバーの範囲外と範囲内に固定の列をつくる
◆ 範囲内の固定列分のスペースを確保するようにダミーの tr を最初に入れる
◆ 固定したい td を absolute で固定 
前にテーブルでも css でいろいろできると知ったので 今回は横をスクロール固定してみます
縦スクロールの固定は HTML 構造が行単位なので thead の tr を移動するだけで簡単そうですが 横スクロールはいろいろと大変です

作ったものはこんなの
なんと IE8 でも動きました
複雑な css は使ってないですし

サンプル
table-hscroll01
table-hscroll02

スクロールバーの外側と内側で固定する列を作ってます

コードはこんなの
<!doctype html>
<meta charset="utf-8">
<div class="area">
    <div class="wrapper">
        <table>
            <tr class="dummy"><td></td><td></td><td></td><td></td></tr>
            <tr><td class="out-of-table-fixed">表の外側で固定</td><td class="in-table-fixed">表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text1</td><td>あいうえお</td></tr>
            <tr><td class="out-of-table-fixed">表の外側で固定</td><td class="in-table-fixed">表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text2</td><td>かきくけこ</td></tr>
            <tr><td class="out-of-table-fixed">表の外側で固定</td><td class="in-table-fixed">表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text3</td><td>さしすせそ</td></tr>
        </table>
    </div>
</div>

<style>
*{
  box-sizing:border-box;
  font-family:meiryo;}
.area{
  width:564px;
  position:relative;
  border:12px solid darkslateblue;
  background:#FFE2FA;}
.wrapper{
  width:360px;
  overflow:auto;
  margin-left:180px;}
table{
  background:mintcream;
  table-layout:fixed;
  width:100%;
  border-spacing:0;}
td{
  width:180px;
  height:60px;
  padding:0;
  border-right:2px solid red;
  border-bottom:2px solid red;
  vertical-align:top;}
tr td:first-child{
  border-left:2px solid red;}
tr.dummy+tr td{
  border-top:2px solid red;}
tr.dummy,tr.dummy *{
  height:0;
  border:0;
  font-size:0;
  visibility:hidden;}
td.out-of-table-fixed{
  position:absolute;
  left:0px;}
td.in-table-fixed{
  position:absolute;
  background:mintcream;
  left:180px;}
</style>

内側をうまく配置するために見えないダミーの行が一番最初にあります

スクロールバー出すために table-layout が fixed なので width で指定が必要ですが position:absolute; で固定しているので height も必須になります
高さ自動にするならテーブル表示後すぐに JavaScript で行内の一番 height が大きい要素に合わせることになりそうです

それと colspan や rowspan が混ざってくるとずれてきそうです
css のデザインと colspan, rowspan の相性って最悪だと思うんです
HTML として colspan や rowspan じゃなくて td に対して「上と結合」や「左と結合」という属性にして td は綺麗に縦横で数が揃ってるようになってほしいです

追記

ダミーの行が混ざってるのが気持ち悪い気がしたので tbody にわけてみました
<table>
<tbody>
<tr class="dummy"><td></td><td></td><td></td><td></td></tr>
</tbody>
<tbody class="tbody">
<tr><td class="out-of-table-fixed">表の外側で固定</td><td class="in-table-fixed">表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text1</td><td>あいうえお</td></tr>
<tr><td class="out-of-table-fixed">表の外側で固定</td><td class="in-table-fixed">表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text2</td><td>かきくけこ</td></tr>
<tr><td class="out-of-table-fixed">表の外側で固定</td><td class="in-table-fixed">表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text3</td><td>さしすせそ</td></tr>
</tbody>
</table>

2 つめの tbody だけ見れば全く問題なしです
CSS Selector で扱うときも .tbody を通せば dummy を気にせず使えます
document.querySelectorAll("table .tbody tr")
document.querySelector("table .tbody tr:nth-child(" + n + ")")