Html 滚动时带有固定标题的表格如果较小，则不起作用

几天来我一直在试图编辑这些表格

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

代码看起来如此难看是因为我继承了这个结构，我还没有时间担心它

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

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

这就是它的外观，即使只需滚动div就会变小

样本：

<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>

这就是它变小时的样子

---

我建议您清理代码，从HTML中删除样式标记，并为其创建CSS文件。这样做将允许您调试问题

---

或者，我建议使用一些表框架，使您的工作响应于页面大小，因此无需为每个页面大小创建不同的类。我会使用这个框架，但是，还有其他框架。

只使用一个表创建它，并使其在AD位置内保持粘性

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

我不知道你为什么要写内联样式。它是电子邮件模板吗？

---

否则，请创建一个单独的css文件并将其导入html。

这个怎么样？看起来不错，但不可能。我在桌子外面有一张桌子，这是我推荐的。它看起来应该像现在这样丑陋/我不能这样做，因为它是用字符串生成代码的。它来自C++程序。很难解释。所有的代码都是非常糟糕的代码。。我不时地清理它，但这并不容易我继承了这段代码，所以这根本不是我的错。好的，谢谢你，我午饭后会试试，如果成功的话，我会给你一个答案。谢谢，这成功了！我很久以前就试过了。。但不仅仅是在标签上。。非常感谢你！我现在看到了，位置：sticky是Experimantel，不应用于生产。。这是个问题吗？因为我们有客户，Internet Explorer不支持这一点：/如果也有解决方案，那就太好了，也许你已经有了解决方案？然后可能你必须处理它位置：固定；和javaScript，但固定位置是相对于浏览器窗口的。好的，谢谢！我让它的位置：粘性，直到有人需要它….：D