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

Question

我一直在关注我能收集到的信息(例如 here )并构建了一个 HTML 表格，它的第一列是固定的，仅使用 CSS。不幸的是，固定列本身比其余内容低了好几个像素，我不知道为什么。

这是代码:JSFiddle link .我究竟做错了什么？

尝试了以下操作:

• 更改了单元格大小、边距、填充和边框设置
• 将 position: absolute 替换为 float: left
• 尝试将滚动条放在其他元素上
• 添加/删除的内容
• margin-top: -16px; 没有解决这个问题，因为距离随着单元格的高度而变化

.table 
{
  border-collapse:collapse;
  border: 1px solid grey; 
  display: table;
}

.tr
{
  display: table-row;
}

.th
{
  display: table-cell;
  border:1px solid grey;   
  white-space:nowrap;
  font-weight: bold;
}

.td 
{
  display: table-cell;
  border:1px solid grey;   
  white-space:nowrap;
  margin:0;
}

.wrapper 
{ 
  overflow-x:scroll;  
  margin-left:100px; 
  overflow-y:visible;  
}

.wrapper-outer
{ 
  position: relative;
  width: 300px;
}

.fixed {
  position:absolute; 
  width:100px; 
  left:0;
  top:auto;
}       

<div class=wrapper-outer>
<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="th fixed">Fixed 1</div>
            <div class="th">Lorem ipsum dolor</div>
            <div class="th">Ipsum</div>
            <div class="th">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 1</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 2</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 3</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 4</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 5</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
    </div>
</div>
</div>

Answer 1

将此添加到您的 CSS:

.th.fixed {
    top: 0;
}

Updated Fiddle

(在 Chrome 中工作 - 在 FireFox 中看起来不正确)