table-layout：固定百分比和计算不工作

Question

我有一个有很多行的 table，我想在滚动时为其覆盖一个固定的 table header。页面的布局是响应式的，带有一个固定的左侧菜单，该菜单可以具有 2 个固定宽度中的 1 个。我在将固定 header 中的列与 table.

对齐时遇到问题

按照这个 fiddle

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">
                  0.00 </td>
                <td class="total_variance" rowspan="2">
                </td>
              </tr>
              <tr>
                <td class="recurring_period colspan bar0" colspan="12">
                  .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" 属性，必须在具有类的元素上删除它，因为它会覆盖您 [=25] 中的任何更改=].

此外，% 单位是相对于元素的父对象的，我相信您正在尝试根据 window 宽度计算它，在这种情况下使用 [=13 更有意义=]（视口宽度），它是相对于window.

的宽度

此外，代码从未在 table

上设置 css 属性 table-layout: fixed

Answer 2

如果您在 codepen

上修复了 table 布局检查“CSS Only Fixed Table Headers”

但是如果table里面有动态内容或者很多数据，可以用position: relative，用js改top 属性

这里有一个 simple codepen 可以更好地理解如何去做。当然，这种方法也有优缺点。

优点

所有宽度都在 browser-side 中计算，因此您的 table header 和列的宽度始终相同
您使用相同的 table 行，因此不需要复制任何数据
js端只计算滚动位置和位置header，不需要计算列宽
更多 table 数据不会减慢计算速度，所以基本上 table 可以非常大。

缺点：

基于Js的解决方案
滚动事件可能真的很慢。
更多 tables 减慢计算速度
样式非常有限

还有很多其他的js插件可以tableheader修复

table-layout：固定百分比和计算不工作

table-layout: fixed percentage and calc not working

html

css

fixed-header-tables

优点

缺点：