Question

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

我不能让div隐藏它们，也不会垂直滚动内容。我确实希望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);
        });
    });

Answer 1

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

如果您使表格或div.inner也位于：绝对值，那么这些元素应该按照您想要的方式滚动，但您必须重新修改对齐方式。

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

1 个答案: