两个单独的固定列标题，带有 CSS 或 JQuery 的水平滚动

Question

我试图在同一页面上获得两个单独的表格，以具有固定的标题，这些标题要么具有垂直滚动内容，要么在向下滚动时“粘”在页面顶部。

我遇到的问题是其中一个表格具有水平滚动内容。

这就是它的样子。我想要修复的是左侧的“JAPAN”、“Customer”列，然后是水平滚动表中的“Producer”、“PR”和“Q”列。使用 CSS 甚至 JQuery 是否可以使用我的设置？

谢谢。

JSFiddle： https://jsfiddle.net/7fnzxoq4/

来自 JSFiddle 的示例代码：

HTML

<div id="content" >
<div class="outerFixedColumn">
    <table class="fixedColumn">
            <thead>
            <tr>
                <th colspan="5">JAPAN</th>
            </tr>
            <tr>
                <th colspan="3">Customer</th>
                <th>Type</th>
                <th>Sector</th>
            </tr>
            </thead>
            <tbody>
            ...data...    
        </tbody>
    </table>
<div class="innerFixedColumn">
    <table class="fixedColumn scrollTable">
            <thead>
            <tr>
                <th class="centered" colspan="2">Producer 1</th>
                <th class="centered" colspan="2">Producer</th>
                <th class="centered" colspan="2">Producer</th>
                <th class="centered" colspan="2">Producer</th>
                <th class="centered" colspan="2">Producer</th>
            </tr>
            <tr>
                  <th class="centered">PR</th>
                  <th class="centered">Q</th>
                  <th class="centered">PR</th>
                  <th class="centered">Q</th>
                  <th class="centered">PR</th>
                  <th class="centered">Q</th>
                  <th class="centered">PR</th>
                  <th class="centered">Q</th>
                  <th class="centered">PR</th>
                  <th class="centered">Q</th>
            </tr>
            </thead>
            <tbody>
            ...data...
        </tbody>
        </table>
</div>
</div>
</div>

CSS

#content .outerFixedColumn {
  padding: 0;
  margin: 0;
}

#content .innerFixedColumn {
  overflow: auto;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

#content table.fixedColumn {
  margin: 0 5px 0 0;
  font-size: 0.8em;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  float: left;
  border-collapse: collapse;
}

#content table.fixedColumn.scrollTable {
  border-left: none;
  border-right: none;
}

#content table.fixedColumn th {
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding: 6px 7px 7px 7px;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  border-left: 1px solid #dddddd;
  background: #eeeeee;
  height: 14px;
  line-height: 14px;
}

#content table.fixedColumn th.row {
  height: 28px;
  line-height: 28px;
}

#content table.fixedColumn td {
  text-align: left;
  vertical-align: top;
  padding: 6px 7px 7px 7px;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  border-left: 1px solid #dddddd;
  white-space: nowrap;
  height: 28px;
  line-height: 28px;
}

#content table.fixedColumn th:first-child,
#content table.fixedColumn td:first-child {
  border-left: none;
  padding-left: 8px;
}

#content table.fixedColumn.scrollTable.costs td {
  text-align: right;
  padding-right: 0px;
}

Answer 1

有很多不同的方法可以做到这一点。快速而肮脏的路线是使用jQuery根据窗口的滚动偏移量调整thead元素的相对位置。这样做的问题是您必须在 $(window).scroll 上运行该函数，这可能很烦人。

这是您需要的 jQuery（请记住，您必须确保 thead { position:relative; } 存在于您的 CSS 中）：

$(window).scroll(function(){
  $('thead').each(function(){
    $(this).css({'top':$(window).scrollTop()});
  });
});

由于要在这样的 iframe 中运行额外的计算，它有点滞后，但这里是 the fiddle。