html - 当改变位置固定时它失去了他的理由

Question

我正在尝试制作一个表格(使用 div)。当将标题更改为固定位置时(不想在有更多数据和滚动时隐藏标题)，它会将所有标题单元格移动到右侧。我试图将 margin-left 更改为任何标题单元格以在他的正确位置移动。 (重新定位)

问题是，当试图调整浏览器窗口大小时，标题和数据没有正确显示并且失去了它们的对齐方式..

如何纠正 header-cels 移动(跟随)数据？

body {width:100%; height:300px; background-color:#1f1e1e; overflow:auto;}

.records {width:99%; height:200px;}

.header-cell {height:20px; width:20%; background:#3a3a3a; color:#fff; display:inline-block; margin-left:0px; margin-bottom:4px; }

.cell {height:20px; width:20%; background:#ccc; display:inline-block; margin-left:0px; margin-top:2px;}

<div class="records" >
  <div id="header">
      <div class="header-cell">#</div>
      <div class="header-cell" style="margin-left:-4px;">Name</div>
      <div class="header-cell" style="margin-left:-4px;">Movie</div>
      <div class="header-cell" style="margin-left:-4px;">Episodes</div>   
      <div class="header-cell" style="margin-left:-4px;">Age</div>
  </div>  
  <div id="row1">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
  <div id="row2">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
  <div id="row3">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
</div>

Answer 1

position: fixed; div 失去了它的宽度。显式设置 width:

.header {
    position: fixed;
    width: 100%;
}

更新的代码段:

body {width:100%; height:300px; background-color:#1f1e1e; overflow:auto;}

.records {width:99%; height:200px;}

.header-cell {height:20px; width:20%; background:#3a3a3a; color:#fff; display:inline-block; margin-left:0px; margin-bottom:4px; }

.cell {height:20px; width:20%; background:#ccc; display:inline-block; margin-left:0px; margin-top:2px;}

.header {
    position:fixed;
    width:100%;
}
.row1 {
    padding-top:20px;
}

<div class="records" >
  <div id="header" class="header">
      <div class="header-cell">#</div>
      <div class="header-cell" style="margin-left:-4px;">Name</div>
      <div class="header-cell" style="margin-left:-4px;">Movie</div>
      <div class="header-cell" style="margin-left:-4px;">Episodes</div>   
      <div class="header-cell" style="margin-left:-4px;">Age</div>
  </div>  
  <div id="row1" class="row1">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
  <div id="row2">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
  <div id="row3">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
</div>