How to freeze table columns - html

Question

How to make the horizontal scroll bar only affects the gray columns in the following illustration.
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
#table {
background: white;
margin: 100px auto;
width: 400px;
overflow: auto;
text-align: center;
}
#inner-table {
border-collapse: collapse;
border-radius: 3px;
overflow: hidden
}
td,
th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.sticky {
background-color: #1C3D5A;
color: #dae1e7;
}
.scroll {
background-color: #B8C2CC;
color: #22292f
}
<div id="table">
<table id="inner-table">
<thead>
<tr>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">1</td>
<td class="sticky">2</td>
<td class="scroll">3</td>
<td class="scroll">4</td>
<td class="scroll">5</td>
<td class="scroll">6</td>
<td class="scroll">7</td>
<td class="scroll">8</td>
<td class="sticky">9</td>
<td class="sticky">10</td>
</tr>
<tr>
<td class="sticky">11</td>
<td class="sticky">12</td>
<td class="scroll">13</td>
<td class="scroll">14</td>
<td class="scroll">15</td>
<td class="scroll">16</td>
<td class="scroll">17</td>
<td class="scroll">18</td>
<td class="sticky">19</td>
<td class="sticky">20</td>
</tr>
</tbody>
</table>
</div>

Answer 1

This was rather more difficult to put together than I anticipated - and even now, I am wondering if there isn't a much simpler approach.
The approach below utilises:
an outer container which contains two position: absolute tables
a fixed-width inner container - using margins for positioning inside the outer container - with a scrollbar, which allows you to see the oversized table it contains
Working Example:
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
.outer-container {
position: relative;
background-color: white;
margin: 40px auto;
width: 400px;
overflow: hidden;
text-align: center;
}
.outer-container,
.inner-container {
height: 125px;
}
table {
height: 108px;
}
.inner-container table {
border-radius: 3px;
}
td, th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.fixed-table th,
.fixed-table td {
background-color: #1C3D5A;
color: #dae1e7;
}
.inner-container {
margin: 0 130px;
max-width: 612px;
overflow: auto;
}
.inner-container > table {
background-color: #B8C2CC;
color: #22292f
}
.outer-container > table {
position: absolute;
top: 0;
border-collapse: collapse;
}
.outer-container > table:nth-of-type(1) {
left: 0;
}
.outer-container > table:nth-of-type(2) {
right: 0;
}
<div class="outer-container">
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<div class="inner-container">
<table>
<thead>
<tr>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>

Answer 2

CSS3 should do the job.
table {
position: relative;
padding-left: (width-of-your-td-elements);
}
table td:first-of-type {
position: absolute;
left: 0;
}
Sources