Question

我正在尝试制作一张桌子（带有div）。将标题更改为固定位置时（不想在有更多数据和滚动时隐藏标题），它会将所有标题单元格移动到右侧。我试图将margin-left更改为任何标题单元格以移动到正确的位置。（重新定位）

问题是，在尝试调整浏览器窗口大小时，标题标题和数据没有正确显示并且无法正常使用..

如何更正标题广告素材移动（跟随）数据？

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%;
}

更新了代码段

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

当改变位置固定时，它失去了理由

1 个答案: