How to freeze table columns

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