Фиксация ячеек таблицы для горизонтальной прокрутки

Question

Я пытаюсь исправить первый и последний столбцы (.headcol, .lastcol) в таблице с горизонтальной прокруткой, чтобы они всегда отображались гриппом sh слева и справа от видимой панели.

Насколько я понимаю, элементы position: absolute будут относиться к первому родительскому элементу, имеющему position: relative. Однако они настаивают на позиционировании себя относительно прокручиваемого элемента (на один div вверх).

Попробуйте прокрутить прямо в этой скрипке: http://jsfiddle.net/benkeen/hav6eLst/

Я бы хотел белый первый столбец и красный последний столбец остаются на месте, и прокручивается только желтый контент.

Вот код.

#top {
  width: calc(100% - 200px);
  margin-left: 100px;
  margin-right: 100px;
  overflow-x: scroll;
  overflow-y: visible;
}

#pos-relative {
  position: relative;
}

table {
  border-collapse: separate;
  margin-left: 100px;
}

td,
th {
  margin: 0;
  border: 3px solid grey;
  border-top-width: 0px;
  white-space: nowrap;
}

.headcol {
  position: absolute;
  width: 100px;
  left: 0;
  border-right: 0px none black;
  border-top-width: 3px;
  margin-top: -3px;
  background-color: white;
}

.headcol:before {
  content: 'Row ';
}

.lastcol {
  position: absolute;
  right: 0;
  width: 100px;
  background-color: red;
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div id="top">
  <div id="pos-relative">
    <table>
      <tr>
        <th class="headcol">1</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <th class="lastcol">x</th>
      </tr>
      <tr>
        <th class="headcol">2</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <th class="lastcol">x</th>
      </tr>
      ... more rows
    </table>
  </div>
</div>

Я лаю не на то дерево? Возможно, с таблицами это невозможно.

Answer 1

Извиняюсь за путаницу. Да, это было вполне выполнимо - мне просто нужно было инвертировать два элемента верхнего уровня, чтобы прокручиваемый элемент через элемент position: relative, поэтому фиксировал белые + красные ячейки по горизонтали, но по-прежнему позволял нормальную вертикальную прокрутку.

Пример: http://jsfiddle.net/benkeen/4z0x297L/2/

#pos-relative {
  position: relative;
  margin-left: 100px;
  margin-right: 100px;
}


#top {
  width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
}

table {
  border-collapse: separate;
  margin-left: 100px;
}

td,
th {
  margin: 0;
  border: 3px solid grey;
  border-top-width: 0px;
  white-space: nowrap;
}

.headcol {
  position: absolute;
  width: 100px;
  left: 0;
  border-right: 0px none black;
  border-top-width: 3px;
  margin-top: -3px;
  background-color: white;
}

.headcol:before {
  content: 'Row ';
}

.lastcol {
  position: absolute;
  right: 0;
  width: 100px;
  background-color: red;
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div id="pos-relative">
  <div id="top">
    <table>
      <tr>
        <th class="headcol">1</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <th class="lastcol">x</th>
      </tr>
      ... more rows 
    </table>
  </div>
</div>

Answer 2

Если я правильно понимаю, вы хотите сделать первое исправление col и другие прокручиваемые (h или v), если это правильно, это работа js, вы должны поместить некоторый java скрипт, чтобы он работал так, как вы хотите в сети есть масса примеров, просто погуглите ^ _ ^