two fixed columns, horizontal scroll

Comes from http://jsbin.com/uxecel/4/edit?html,css,output

by Petr Haluza

HTML

jaja
<div class="outer">
  <div class="inner">
    <table>
    <tbody>
                <thead>
                <tr>
                    <th>
                        <div class="heading">Heading 1</div>
                    </th>
                    <th>
                        <div class="heading">Heading 2</div>
                    </th>
                    <th>
                        <div class="heading">Heading 3</div>
                    </th>
                </tr>
            </thead>
        <tr>
          <th>Header A</th>
          <th>Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
          <th>Header A</th>
          <th>Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
        </tr>
        <tr>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 6 - A</td>
          <td>col 7 - A</td>
          <td>col 8 - A</td>
          <td>col 9 - A</td>
          <td>col x - A</td>
        </tr>
        <tr>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 6 - A</td>
          <td>col 7 - A</td>
          <td>col 8 - A</td>
          <td>col 9 - A</td>
          <td>col x - A</td>
        </tr>
        <tr>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 6 - A</td>
          <td>col 7 - A</td>
          <td>col 8 - A</td>
          <td>col 9 - A</td>
          <td>col x - A</td>
        </tr>
        <tr>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 6 - A</td>
          <td>col 7 - A</td>
          <td>col 8 -...

CSS

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
th {
/*  position:absolute;
  *position: relative; /*ie7*/
/*  left:0; */
  width:100px;
}
tr td:first-child, tr th:first-child {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}

.outer {position:relative;width:100%;}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:calc(100% - 100px);
  margin-left:100px;
}

.heading {
    position: absolute;
    top: 0;
    line-height: 30px;
    text-align: left;
    border-left: 1px solid black;
    padding-left: 5px;
    margin-left: -5px;
}