-2

我有一个有很多行的表格，我想在滚动时覆盖一个固定的表格标题。页面的布局是响应式的，带有一个固定的左侧菜单，可以有 2 个固定宽度中的 1 个。我在将固定标题中的列与表格对齐时遇到问题。

按照这个小提琴

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；（这对我来说似乎是正确的，并且在片段中）

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

4

2 回答 2

2

似乎有几个问题的组合：

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

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

100vw此外，% 单位是相对于元素的父对象的，我相信您正在尝试根据窗口宽度来计算它，在这种情况下，使用(视口宽度)会更有意义，它与窗户。

table-layout: fixed此外，代码永远不会在表格上设置 css 属性

于 2018-01-25T04:57:43.550 回答
1

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

但是如果你有动态的内容或者表格中有很多数据，你可以用js来使用position: relative 和改变属性。top

这是一个简单的代码笔，可以更好地理解如何做到这一点。当然，这种方法也有一些优点和缺点。

优点

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

缺点：

  • 基于js的解决方案
  • 滚动事件可能真的很慢。
  • 更多表会减慢计算速度
  • 造型非常有限

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

于 2018-01-27T14:12:50.263 回答