Table 固定 header 滚动时如果较小则不起作用

Question

几天来我一直在尝试编辑此 table(s)。

计划是滚动时 header 始终位于顶部。因为一切都是配置代码，所以我无法使用典型的 HTML / CSS。很长一段时间后，我找到了这个（几乎）可行的解决方案。

代码这么难看是因为继承了这个结构，还没来得及操心

仍然存在的问题是当 DIV 外部小于 table 需要时，table 收缩。尽管列实际上具有给定的宽度。如果 div 外面足够宽，那么 table 看起来应该是这样。

我做错了什么？也许有人已经准备好想法或解决方案。

这是它应该的样子（即使 div 只是通过滚动变小）

https://jsfiddle.net/mzue3j9t

样本：

<div id="GRD1" style="overflow: auto hidden; display: block; position: absolute; top: 22px; left: 20px; width: 400px; height: 176px; font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0); z-index: 1; background-color: threedface; visibility: visible; border: 1px solid rgb(127, 157, 185);">
    <table class="header" cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
        <thead>
            <tr>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 17px; font-weight: normal;" title="undefined">&nbsp;</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 48px; font-weight: normal;" title="">Question</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 19px; font-weight: normal;" title="">i.O</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 29px; font-weight: normal;" title="">n.i.O</th>
                <th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 74px; font-weight: normal;" title="">Another check</th>
                <th style="white-space: nowrap; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 78px; font-weight: normal;" title="">Commentary</th>
            </tr>
        </thead>
    </table>
    <div class="body" style="overflow: hidden auto; height: 100%; width: 100%;">
        <table cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
            <tbody>
                <tr id="row_1">
                    <td id="GRD1_num_1" style="border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;;width:17px;text-align:right;white-space:nowrap;">1</td>
                    <td id="GRD1_0_0" row="1" col="1" editable="1" parentid="0" style="width:48px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Test 1</td>
                    <td id="GRD1_0_1" row="1" col="2" editable="3" parentid="0" checkstate="1" style="width:19px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
                    </td>
                    <td id="GRD1_0_2" row="1" col="3" editable="3" parentid="0" checkstate="0" style="width:29px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" value="0">
                    </td>
                    <td id="GRD1_0_3" row="1" col="4" editable="3" parentid="0" checkstate="1" style="width:74px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
                        <input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
                    </td>
                    <td id="GRD1_0_4" row="1" col="5" editable="1" parentid="0" style="width:78px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 1px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Commentary1</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是它变小后的样子..

https://jsfiddle.net/mzue3j9t/1

Answer 1

我建议清理您的代码，从您的 HTML 中删除样式标签并为其创建一个 CSS 文件。这样做可以让您调试问题。

或者，我建议使用一些表格框架，这将使您根据页面大小进行工作，因此无需为每个页面大小创建不同的类。我会使用框架 (https://getbootstrap.com/) 但是，还有其他框架。

Answer 2

只用 1 个 table 创建它，并使 th 在 thead 位置粘滞。

<table>
  <thead>
    <tr>
      <th style="background:threedface;position: sticky; top: 0;"></th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      ...
    </tr>
    ...
  </tbody>
</table>

我不知道你为什么要写内联样式。它是电子邮件模板吗？否则请创建一个单独的 css 文件并将其导入 html.

Table 固定 header 滚动时如果较小则不起作用

Table with fixed header on scrolling does not work if it smaller

html

css

scroll

fixed-header-tables