如何纠正HTML表格固定列中的奇怪边距错误？

我一直在遵循我可以收集的信息（例如）并构建了一个HTML表，它的第一列是固定的，仅使用CSS。 不幸的是，固定列的位置比其他内容低了好几个像素，我不知道为什么

以下是代码：。我做错了什么

尝试了以下方法：

• 更改了单元格大小、边距、填充和边框设置
• 将

  位置：绝对

  替换为

  浮动：左

• 尝试将滚动放置在其他元素上
• 添加/删除的内容

• 页边距顶部：-16px无法解决此问题，因为距离随单元格高度的变化而变化

.table
{
边界塌陷：塌陷；
边框：1px纯灰；
显示：表格；
}
.tr
{
显示：表格行；
}
.th
{
显示：表格单元格；
边框：1px纯灰；
空白：nowrap；
字体大小：粗体；
}
.td
{
显示：表格单元格；
边框：1px纯灰；
空白：nowrap；
保证金：0；
}
.包装纸
{ 
溢出-x：滚动；
左边距：100px；
溢出y：可见；
}
.外包装
{ 
位置：相对位置；
宽度：300px；
}
.固定{
位置：绝对位置；
宽度：100px；
左：0；
顶部：自动；
}

固定1
同侧阴唇
乱数假文
萨托
固定1
洛勒姆
乱数假文
萨托
固定2
洛勒姆
乱数假文
萨托
固定3
洛勒姆
乱数假文
萨托
固定4
洛勒姆
乱数假文
萨托
固定5
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托

将此添加到CSS中：

.th.fixed {
    top: 0;
}

（在Chrome中工作-在FireFox中看起来不正确）

将此添加到CSS中：

.th.fixed {
    top: 0;
}

---

（在Chrome中工作-在FireFox中看起来不太对劲）

我为fixed

td

添加了

margin top

，效果不错

---

我为固定的

td

添加了

margin top

，效果不错

---

应用

。固定{页边空白顶部：-16px}

.table
{
边界塌陷：塌陷；
边框：1px纯灰；
显示：表格；
}
.tr
{
显示：表格行；
}
.th
{
显示：表格单元格；
边框：1px纯灰；
空白：nowrap；
字体大小：粗体；
}
.td
{
显示：表格单元格；
边框：1px纯灰；
空白：nowrap；
保证金：0；
}
.包装纸
{ 
溢出-x：滚动；
左边距：100px；
溢出y：可见；
}
.外包装
{ 
位置：相对位置；
宽度：300px；
}
.固定{
位置：绝对位置；
宽度：100px；
左：0；
顶部：自动；
利润上限：-16px；
}

固定1
同侧阴唇
乱数假文
萨托
固定1
洛勒姆
乱数假文
萨托
固定2
洛勒姆
乱数假文
萨托
固定3
洛勒姆
乱数假文
萨托
固定4
洛勒姆
乱数假文
萨托
固定5
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托
固定6
洛勒姆
乱数假文
萨托

应用

.fixed{margin top:-16px}

.table
{
边界塌陷：塌陷；
边框：1px纯灰；
显示：表格；
}
.tr
{
显示：表格行；
}
.th
{
显示：表格单元格；
边框：1px纯灰；
空白：nowrap；
字体大小：粗体；
}
.td
{
显示：表格单元格；
边框：1px纯灰；
空白：nowrap；
保证金：0；
}
.包装纸
{ 
溢出-x：滚动；
左边距：100px；
溢出y：可见；