html - 我在带有 div 的表格中做错了什么

Question

我用 div 构造的表格有什么问题？ 为什么标题行和单元格行的宽度不同？

另一个问题是，在调整浏览器窗口标题大小时，单元格失去了对齐方式。我想对标题和单元格进行相同的移动。 如果您调整浏览器窗口的大小，您会看到边框移动不同。

这是我的代码

html, body {
  width: 100%;
  height: 95vh;
  overflow: hidden;
  background-color: rgba(31, 30, 30, 1);
}
.records {
  width: 99%;
  overflow-x: hidden;
  overflow-y: auto;
}
.header-cell {
  display: inline-block;
  width: 9%;
  height: 20px;
  margin-top: 2px;
  margin-left: -4px;
  border: 1px solid #fff;
  background: #3a3a3a;
  color: #fff;
  white-space: nowrap;
}
.cell {
  display: inline-block;
  width: 9%;
  height: 20px;
  margin-top: 2px;
  margin-left: -4px;
  border: 1px solid #fff;
  background: #ccc;
  color: #494949;
  white-space: nowrap;
}
.header {
  position: fixed;
  width: 100%;
}
.row1 {
  padding-top: 4px;
}

/* scrollbars */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
  border-radius: 10px;
  background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, .4);
}
/* scrollbars */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
  border-radius: 10px;
  background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, .4);
}

<div class="records">
  <div class="header">
    <div class="header-cell">#</div>
    <div class="header-cell">Movie</div>
    <div class="header-cell">Distributor</div>
    <div class="header-cell">Country</div>
    <div class="header-cell">Language</div>
    <div class="header-cell">Name</div>       
    <div class="header-cell">Role</div>  
    <div class="header-cell">Born</div>      
    <div class="header-cell">Star Sign</div>
    <div class="header-cell">Episodes</div> 
  </div>
  <div style="padding-top:19px;">
    <div class="cell">145</div>
    <div class="cell">Game Of Thrones</div>
    <div class="cell">HBO</div>
    <div class="cell">USA</div>    
    <div class="cell">English</div>
    <div class="cell">
      <a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a>
    </div>
    <div class="cell">Tyrion Lannister</div>
    <div class="cell">June 11, 1969</div>       
    <div class="cell">Gemini</div>  
    <div class="cell">2-3-4-6-11</div>  
  </div>  
  <div style="padding-top:1px;">
    <div class="cell">146</div>
    <div class="cell">Game Of Thrones</div>
    <div class="cell">HBO</div>
    <div class="cell">USA</div>    
    <div class="cell">English</div>
    <div class="cell">
      <a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a>
    </div>
    <div class="cell">Jon Snow</div>
    <div class="cell">December 26, 1986</div>       
    <div class="cell">Capricorn</div>  
    <div class="cell">1-2-3-6-9</div>  
  </div>
</div>

Answer 1

我已经更新了你的 html 和样式，条目行的宽度和 float :左；使用而不是显示:内联 block ；

HTML

<div class="records" >
    <div class="header">
        <div class="header-cell">#</div>
        <div class="header-cell">Movie</div>
        <div class="header-cell">Distributor</div>
        <div class="header-cell">Country</div>
        <div class="header-cell">Language</div>
        <div class="header-cell">Name</div>       
        <div class="header-cell">Role</div>  
        <div class="header-cell">Born</div>      
        <div class="header-cell">Star Sign</div>
        <div class="header-cell">Episodes</div> 
    </div>
    <div style="padding-top:19px;width:100%">
        <div class="cell">145</div>
        <div class="cell">Game Of Thrones</div>
        <div class="cell">HBO</div>
        <div class="cell">USA</div>    
        <div class="cell">English</div>
        <div class="cell"><a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a></div>
        <div class="cell">Tyrion Lannister</div>
        <div class="cell">June 11, 1969</div>       
        <div class="cell">Gemini</div>  
        <div class="cell">2-3-4-6-11</div>  
    </div>  
    <div style="padding-top:1px;width:100%">
        <div class="cell">146</div>
        <div class="cell">Game Of Thrones</div>
        <div class="cell">HBO</div>
        <div class="cell">USA</div>    
        <div class="cell">English</div>
        <div class="cell"><a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a></div>
        <div class="cell">Jon Snow</div>
        <div class="cell">December 26, 1986</div>       
        <div class="cell">Capricorn</div>  
        <div class="cell">1-2-3-6-9</div>  
    </div>
</div>

风格

html,body {
    width:100%;
    height:95vh;
    background-color: rgba(31,30,30,1);
    overflow:hidden;
}
.records {
    width:99%;
    overflow-x:hidden;
    overflow-y:auto;
}
.header-cell {
    height: 20px;
    width: 9%;
    background: #3a3a3a;
    color: #ffffff;
    /* display: inline-block; */
    /* margin-left: -4px; */
    white-space: nowrap;
    border: 1px solid #fff;
    /* margin-top: 2px; */
    float: left;
}
.cell {    
    height: 20px;
    width: 9%;
    background: #cccccc;
    color: #494949;
    /* display: inline-block; */
    /* margin-left: -4px; */
    float: left;
    white-space: nowrap;
    border: 1px solid #fff;
    /* margin-top: 2px; */
}
.header {
    /*position:fixed; */
    width:100%;
}
.row1 {
    padding-top:4px;
}

/* scrollbars */
::-webkit-scrollbar {width: 5px;}   
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}    
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}   
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}    
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

引用更新 fiddle : https://jsfiddle.net/5Ldv5m1a/3/