0

无论如何在可滚动的div中垂直滚动绝对定位的表头（th）？

我无法让 div 隐藏 th，它们也不会随着内容垂直滚动。我确实希望 TH 列在水平滚动时保持静止（并且效果很好），我只是不希望它们在滚动时保持静止。

我这里有一个例子：

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);
        });
    });
4

1 回答 1

0

我认为问题与绝对定位但包含在相对定位的元素中的 th 元素有关。正在滚动的元素也是相对定位的。

如果您制作表格或 div.inner 也 position: absolute th 元素应该像您想要的那样滚动，但您必须重新调整对齐方式。

于 2013-06-20T04:06:17.210 回答