在可滚动的div中垂直滚动绝对定位的表头（th）

Question

Is there anyway to vertically scroll absolutely positioned table headers (th) within a scrollable div?

I cannot get the div to hide the th's nor will they scroll vertically with the content. I do want the TH column to remain stationary on horizontal scroll (and that works fine), I just don't want them to stay stationary on scroll.

I have an example here:

http://jsfiddle.net/tsnevillecom/EHSN4/1/

HTML

<div class="outer">
<div class="inner">
<table id="compareTable">
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header A</th>
      <td>col 1 - A</td>
      <td>col 2 - A (WITH LONGER CONTENT)</td>
      <td>col 3 - A</td>
      <td>col 4 - A</td>
      <td>col 5 - A</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header B</th>
      <td>col 1 - B</td>
      <td>col 2 - B</td>
      <td>col 3 - B</td>
      <td>col 4 - B</td>
      <td>col 5 - B</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header C</th>
      <td>col 1 - C</td>
      <td>col 2 - C</td>
      <td>col 3 - C</td>
      <td>col 4 - C</td>
      <td>col 5 - C</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header D</th>
      <td>col 1 - D</td>
      <td>col 2 - D (WITH LONGER CONTENT)</td>
      <td>col 3 - D</td>
      <td>col 4 - D</td>
      <td>col 5 - D</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header E</th>
      <td>col 1 - E</td>
      <td>col 2 - E</td>
      <td>col 3 - E</td>
      <td>col 4 - E</td>
      <td>col 5 - E</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header F</th>
      <td>col 1 - F</td>
      <td>col 2 - F</td>
      <td>col 3 - F</td>
      <td>col 4 - F</td>
      <td>col 5 - F</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header G</th>
      <td>col 1 - G</td>
      <td>col 2 - G (WITH LONGER CONTENT)</td>
      <td>col 3 - G</td>
      <td>col 4 - G</td>
      <td>col 5 - G</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header H</th>
      <td>col 1 - H</td>
      <td>col 2 - H</td>
      <td>col 3 - H</td>
      <td>col 4 - H</td>
      <td>col 5 - H</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header I</th>
      <td>col 1 - I</td>
      <td>col 2 - I</td>
      <td>col 3 - I</td>
      <td>col 4 - I</td>
      <td>col 5 - I</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header J</th>
      <td>col 1 - J</td>
      <td>col 2 - J (WITH LONGER CONTENT)</td>
      <td>col 3 - J</td>
      <td>col 4 - J</td>
      <td>col 5 - J</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header K</th>
      <td>col 1 - K</td>
      <td>col 2 - K</td>
      <td>col 3 - K</td>
      <td>col 4 - K</td>
      <td>col 5 - K</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header L</th>
      <td>col 1 - L</td>
      <td>col 2 - L</td>
      <td>col 3 - L</td>
      <td>col 4 - L</td>
      <td>col 5 - L</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header M</th>
      <td>col 1 - M</td>
      <td>col 2 - M (WITH LONGER CONTENT)</td>
      <td>col 3 - M</td>
      <td>col 4 - M</td>
      <td>col 5 - M</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header N</th>
      <td>col 1 - N</td>
      <td>col 2 - N</td>
      <td>col 3 - N</td>
      <td>col 4 - N</td>
      <td>col 5 - N</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header O</th>
      <td>col 1 - O</td>
      <td>col 2 - O</td>
      <td>col 3 - O</td>
      <td>col 4 - O</td>
      <td>col 5 - O</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header P</th>
      <td>col 1 - P</td>
      <td>col 2 - P (WITH LONGER CONTENT)</td>
      <td>col 3 - P</td>
      <td>col 4 - P</td>
      <td>col 5 - P</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header Q</th>
      <td>col 1 - Q</td>
      <td>col 2 - Q</td>
      <td>col 3 - Q</td>
      <td>col 4 - Q</td>
      <td>col 5 - Q</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header R</th>
      <td>col 1 - R</td>
      <td>col 2 - R</td>
      <td>col 3 - R</td>
      <td>col 4 - R</td>
      <td>col 5 - R</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header S</th>
      <td>col 1 - S</td>
      <td>col 2 - S (WITH LONGER CONTENT)</td>
      <td>col 3 - S</td>
      <td>col 4 - S</td>
      <td>col 5 - S</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header T</th>
      <td>col 1 - T</td>
      <td>col 2 - T</td>
      <td>col 3 - T</td>
      <td>col 4 - T</td>
      <td>col 5 - T</td>
    </tr>
    <tr>
      <th class="question">This is a long question</th>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <th class="header">Header U</th>
      <td>col 1 - U</td>
      <td>col 2 - U</td>
      <td>col 3 - U</td>
      <td>col 4 - U</td>
      <td>col 5 - U</td>
    </tr>
</table>
</div>
</div>

CSS

#compareTable {
  table-layout: fixed; 
  width: 100%;
  border-collapse:collapse;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  padding:10px;
  height:30px;
  width:100px;
}
th {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  height:100%;
  width:100px;
  background-color:#fafafa;
}
.outer {
    position:relative;
}
.question{
    display:block;
    height:30px;
    width:100%;
    text-align:left;
}
.inner {
  overflow-x:scroll;
  overflow-y:auto;
  width:380px; 
  height:320px;
  margin-left:120px;
}

JS

$(document).ready(function() {
      tableWidth = $("#compareTable").outerWidth() - 140;
      $('.question').width(tableWidth);
      $(".header").each( function() {
          thisPadding = parseInt($(this).css("padding-top"));
          thisHeight = $(this).parent("tr").height();
          $(this).height(thisHeight-thisPadding*2);
        });
    });

Answer 1

I think the problem has to do with the th elements being absolutely positioned but contained by an element that is relatively positioned. The element that is scrolling is also relatively positioned.

If you make the table or the div.inner also position: absolute the th elements should scroll like you want, but you would have to rework your alignment.