Check out my solution here: http://jsfiddle.net/anirbankundu/DJqPf/1881/
I have implemented the solution using two different approaches in the fiddle, highlighting which method is more effective. Feel free to explore and see which one works best for you.
HTML:
<div id="left">
<h4>Left Column</h4>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
</div>
<div id="right" style="text-align:right;">
<h4>Right Column</h4>
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
</div>
CSS:
.table-wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 250px;
}
td,
th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
right: 35%
}
#container {
display: table;
width: 100%;
border: 1px solid red;
}
#row {
display: table-row;
}
#left,
#right,
#middle {
display: table-cell;
border: 1px solid green;
}
#left {
width: 80%;
max-width: 350px;
overflow-x: scroll;
}