使用位置：固定在表格中答案

【问题标题】：Using position:fixed in a table使用位置：固定在表格中
【发布时间】：2022-01-02 23:50:43
【问题描述】：

我查看了许多与此问题相关的其他线程，但没有一个解决此特定问题。我使用 Excel 创建了一个工作表，然后使用 Excel 的另存为功能将其保存为网页。 Excel 会生成一些非常奇怪的 HTML 和 CSS，但这不是问题。我能够将 CSS 文件从 612 行减少到 58 行，并实现相同的外观和感觉。我还能够将工作表的 HTML 文件从 60654 行减少到 60428 行。我还能够将工作表文件中的字符数从 4139575 减少到 2960747。

Excel 将整个工作表保存为填充网页正文的单个表格。此外，当页面创建时，每个 TR 标签都有一个高度属性（以像素为单位）和一个样式高度属性（以磅为单位），每个 TD 标签都有一个宽度属性（以像素为单位）和一个样式宽度属性（以磅为单位） )。

现在我正在尝试将冻结窗格的 CSS 等效项添加到表格中。我尝试过的一切都会导致页面中断。尝试修复前两行时，第一行消失，第二行丢失前两列。当试图修复前两列时，第二列的宽度减少了 50% 以上。在这两种情况下，整个表格仍然向上/向下和向左/向右滚动。

这里是表的开头（包括前两列的 COL 语句）和第一个 TR/TD 行和第二行的第一个 TD 行（第一行的第一个 TD 跨越两行）。

<table border=0 cellpadding=0 cellspacing=0 width=6022 style='border-collapse: collapse;table-layout:fixed;width:4512pt'>
 <col width=40 style='width:30pt'>
 <col width=286 style='width:215pt'>

 <tr height=20 style='height:15.0pt'>
  <td colspan=2 rowspan=2 height=40 class="color1 bold" width=326 style='height:30.0pt; width:245pt'>&nbsp;</td>
  <td colspan=87 class="color1 bold" width=5696 style='width:4267pt'>&nbsp;</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td colspan=6 height=20 class="border1 color1 bold" style='height:15.0pt'>Ranabastre</td>

这是我一直在尝试使用的 CSS：

.posfixtop {
    position:fixed;
    top:0px;
    left:0px;
    height:40px;
    width:100%;
    }
.posfixleft {
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:326px;
    }

我知道根据 HTML5，实际上使用的每个属性都不是有效的 HTML。我没有删除它们或替换 CSS 文件中没有 CSS 版本的那些，只是因为它们到目前为止还没有造成问题。

我在这里缺少什么吗？我认为也许您不能冻结表中的列或行，但我害怕必须创建多个表的想法。桌子很大。

编辑：再次查看 HTML，我注意到我在上面陈述了一些错误的内容。 TD 标签没有宽度属性或样式宽度属性。 COL 标签有这些。 TR标签有高度属性和样式高度属性，每行第一个TD也有高度属性和样式高度属性。

新信息：

我终于解决了冻结行的问题。这是有效的 CSS：

thead {
    position:sticky;
    top:0;
    min-height:120px;
    height:120px;
    z-index:50;
    background-color:black;
    }

我从 Freezing Row and Column in HTML Table Using CSS 获得了帮助我提出 CSS 的信息。

我在我想冻结的行周围放置了标签以完成它。此外，Excel 在表格上放置了一个border-collapse:collapse 属性，我发现我的单元格边框没有被保留。我在这里找到了一篇关于堆栈溢出的文章，通过说明应该使用边界折叠：分离来回答这个问题。我相应地更改了它，边界问题得到了解决：

Border style do not work with sticky position element

我还没有完成的是冻结列。当我将 posfixleft 类放在代表前两列的 td 上（使用标题下方的第一个可见行作为测试）时，我得到的是单元格滚动到屏幕顶部并停止，而其余行消失在垂直滚动中的标题行后面，并且它们在水平滚动中保持预期的位置。我必须在 posfixleft 类中包含 background-color 属性，以防止行中的数据在滚动到固定列后面时不可见。

所以剩下的问题是，如何让前两列在修复后消失在标题行后面？另外，我知道答案可能是我必须使用 javascript，但是是否有一个简单的解决方案可以为每一行创建 2 个单独的 posfixleft 类？我将大表分解为较小的表（按行），但结果最长的表有 81 行、127 行、128 行和 222 行，不包括标题行。

【问题讨论】：

标签： html css excel

【解决方案1】：

事实证明我回答了我自己的问题，所以这是我的回答，希望它将来对其他人有所帮助。

可以在不使用 div 或 javascript 的情况下修复表格中的行和列。下面是一个展示其工作原理的示例。

首先，表格的 HTML 具有固定的 2 行标题和 2 列在右侧。其余的列和行演示了滚动功能。

<table class="fixedTable">
<col width:20 style="width:15pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<thead>
<tr>
<td class="posfixleft1">&nbsp;</td>
<td class="posfixleft2">&nbsp;</td>
<td>header1</td>
<td>header2</td>
<td>header3</td>
<td>header4</td>
<td>header5</td>
<td>header6</td>
<td>header7</td>
<td>header8</td>
<td>header9</td>
</tr>
<tr>
<td class="posfixleft1">&nbsp;</td>
<td class="posfixleft2">&nbsp;</td>
<td>header1</td>
<td>header2</td>
<td>header3</td>
<td>header4</td>
<td>header5</td>
<td>header6</td>
<td>header7</td>
<td>header8</td>
<td>header9</td>
</tr>
</thead>
<tr>
<td class="posfixleft3">1</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">2</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">3</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">4</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">5</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>

现在是处理所有样式和冻结窗格的 CSS：

body {
  margin-top:0;
  margin-right:0;
  margin-bottom:0;
  margin-left:0;
  }
.fixedTable {
    border-collapse:separate;
    table-layout:fixed;
    width:300px;
    height:100px;
    }
thead {
    position:sticky;
    top:0;
    min-height:40px;
    height:40px;
    z-index:50;
  color:white;
    background-color:black;
    }
.posfixleft1 {
    position:sticky;
    top:0;
    left:0;
    height:20px;
    width:20px;
    z-index:20;
  color:white;
    background-color:black;
    }
.posfixleft2 {
    position:sticky;
    top:0;
    left:20px;
    height:20px;
    width:80px;
    z-index:20;
  color:white;
    background-color:black;
    }
.posfixleft3 {
    position:sticky;
    top:0;
    left:0;
    height:20px;
    width:20px;
    z-index:20;
  color:white;
    background-color:black;
    }
.posfixleft4 {
    position:sticky;
    top:0;
    left:20px;
    height:20px;
    width:80px;
    z-index:20;
  color:white;
    background-color:black;
    }

Try it here

我的页面上没有 jsfiddle 的一个问题。表格显示为每个单元格周围都有一个边框，当您水平滚动时，左列会稍微向左移动。同样，当垂直滚动时，表格的顶部会略微向上移动，并且在头部最左侧的列中会出现一些垃圾。我试过包括一个边框：0； fixedTable 类中的属性，但它什么也没做，所以我删除了它。同样，我的网页上没有这些问题，所以我不知道 jsfiddle 有什么不同。

【讨论】：