Question

我有一个包含许多行的表，我想在滚动时覆盖一个固定的表头。页面布局是一个固定的左手菜单响应，可以有2个固定宽度中的一个。我在修复固定标题中的列与表格时遇到问题。

按照这个小提琴

body {
  width: 1519px;
}

#fixedheader {
  width: calc (100% - 100px);
}

#contenttable {
  width: 100%;
}

#fixedheader {
  width: calc(100% - 100px);
  position: fixed;
  top: 300px;
  border: 1px solid black;
  background-color: yellow;
}

.donor_name_header {
  width: calc((100% - 100px)/5);
}

.total_row_header,
.total_variance_header {
  width: calc((100% - 100px)/10);
}

.bar0 {
  background-color: #CCFFCC;
}

<body>
  <table>
    <tbody>
      <tr>
        <td style="100px">Left column, width may change between 2 values</td>
        <td style="position: relative;">

          <table id="fixedheader">
            <thead>

              <tr>
                <th style="width:20%;">
                  &nbsp;
                  <!--placehold header row in data block-->
                </th>
                <th style="width: 5.8333333333333%">
                  Jan 17 </th>
                <th style="width: 5.8333333333333%">
                  Feb 17 </th>
                <th style="width: 5.8333333333333%">
                  Mar 17 </th>
                <th style="width: 5.8333333333333%">
                  Apr 17 </th>
                <th style="width: 5.8333333333333%">
                  May 17 </th>
                <th style="width: 5.8333333333333%">
                  Jun 17 </th>
                <th style="width: 5.8333333333333%">
                  Jul 17 </th>
                <th style="width: 5.8333333333333%">
                  Aug 17 </th>
                <th style="width: 5.8333333333333%">
                  Sep 17 </th>
                <th style="width: 5.8333333333333%">
                  Oct 17 </th>
                <th style="width: 5.8333333333333%">
                  Nov 17 </th>
                <th style="width: 5.8333333333333%">
                  Dec 17 </th>
                <th style="width:10%;">
                  Total&nbsp;
                  <!--placehold header row in data block-->
                </th>
                <th style="width:10%;">
                  <!--placehold header row in data block-->
                </th>
              </tr>

            </thead>
          </table>
          <table id="contenttable">
            <thead>

              <tr>
                <th style="width:20%;">
                  &nbsp;
                  <!--placehold header row in data block-->
                </th>
                <th style="width: 5.8333333333333%">
                  Jan 17 </th>
                <th style="width: 5.8333333333333%">
                  Feb 17 </th>
                <th style="width: 5.8333333333333%">
                  Mar 17 </th>
                <th style="width: 5.8333333333333%">
                  Apr 17 </th>
                <th style="width: 5.8333333333333%">
                  May 17 </th>
                <th style="width: 5.8333333333333%">
                  Jun 17 </th>
                <th style="width: 5.8333333333333%">
                  Jul 17 </th>
                <th style="width: 5.8333333333333%">
                  Aug 17 </th>
                <th style="width: 5.8333333333333%">
                  Sep 17 </th>
                <th style="width: 5.8333333333333%">
                  Oct 17 </th>
                <th style="width: 5.8333333333333%">
                  Nov 17 </th>
                <th style="width: 5.8333333333333%">
                  Dec 17 </th>
                <th style="width:10%;">
                  Total&amp;n
                  <table id="fixedheader" style="display: none;">
                    <thead>

                      <tr>
                        <th style="width:20%;">
                          &nbsp;
                          <!--placehold header row in data block-->
                        </th>
                        <th style="width: 5.8333333333333%">
                          Jan 17 </th>
                        <th style="width: 5.8333333333333%">
                          Feb 17 </th>
                        <th style="width: 5.8333333333333%">
                          Mar 17 </th>
                        <th style="width: 5.8333333333333%">
                          Apr 17 </th>
                        <th style="width: 5.8333333333333%">
                          May 17 </th>
                        <th style="width: 5.8333333333333%">
                          Jun 17 </th>
                        <th style="width: 5.8333333333333%">
                          Jul 17 </th>
                        <th style="width: 5.8333333333333%">
                          Aug 17 </th>
                        <th style="width: 5.8333333333333%">
                          Sep 17 </th>
                        <th style="width: 5.8333333333333%">
                          Oct 17 </th>
                        <th style="width: 5.8333333333333%">
                          Nov 17 </th>
                        <th style="width: 5.8333333333333%">
                          Dec 17 </th>
                        <th style="width:10%;">
                          Total&nbsp;
                          <!--placehold header row in data block-->
                        </th>
                        <th style="width:10%;">
                          <!--placehold header row in data block-->
                        </th>
                      </tr>

                    </thead>
                  </table>bsp;
                  <!--placehold header row in data block-->
                </th>
                <th style="width:10%;">
                  <!--placehold header row in data block-->
                </th>
              </tr>

            </thead>
            <tbody>
              <tr class="each_donor">
                <td class="donor_name none" rowspan="2" style="width: 20%;">
                  <p> First Last</p>
                  <p>First & Other Last</p>
                </td>

                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="detail_month" style="width: 5.8333333333333%">
                  <span class="variance"><sup>&nbsp;</sup></span>
                </td>
                <td class="total_row" rowspan="2">
                  $360.00 </td>
                <td class="total_variance" rowspan="2">
                </td>
              </tr>
              <tr>
                <td class="recurring_period colspan bar0" colspan="12">
                  $30.00 monthly </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent) {
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "None"
      }], "*")
    }
  </script>





</body>

我找不到正确计算第一列和最后两列的百分比的方法。我试过了：

宽度：计算（20％ - 20px）;
宽度：20％;
宽度：计算（100％-100px）/ 5; （这对我来说似乎是正确的，并且在片段中）

不幸的是我也无法移动位置：相对于顶部

Answer 1

似乎有几个问题的组合：

首先，.fixedheader, .contenttable, .donor_name_header, .total_row_header, .total_variance_header所有这些类都没有在HTML中使用。这可以通过在HTML中使用class="fixedHeader"来解决。

其次，您似乎在HTML中使用了style="width: 10px"属性，必须在包含类的元素上删除它，因为它会覆盖CSS中的任何更改。

此外，％unit是相对于元素的父对象，我相信你试图根据窗口宽度来计算它，在这种情况下，使用100vw更有意义（视口宽度），相对于窗口的宽度。

此外，代码永远不会在表

上设置css属性table-layout: fixed

Answer 2

如果你有固定的表格布局，请在codepen上检查“CSS Only Fixed Table Headers”

但是如果您在表格中有动态内容或大量数据，则可以使用position: relative并使用js更改top属性。

这是一个simple codepen，可以更好地了解如何操作。当然，这种方法有一些优点和缺点。

赞成

所有宽度都是在浏览器端计算的，因此您的表格标题和列的宽度始终相同
您使用相同的表格行，因此不需要复制任何数据
js侧唯一的计算是滚动位置和标题位置，无需计算列宽
更多的表数据不会减慢计算速度，因此基本上表格可能非常大。

缺点：

基于Js的解决方案
滚动事件可能非常慢。
更多表减慢了计算
造型非常有限

此外，还有很多其他的js插件可以修复表头

table-layout：固定百分比和calc无效

2 个答案:

赞成

缺点：