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

Question

几天来我一直在尝试编辑这个表格。

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

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

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

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

它应该是这样的(即使滚动时 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

只用 1 个表创建它，并使 thad 内的 th 位置粘滞。

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

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