为什么最后锯齿状？如何修复 CSS 样式

Question

这是我的样式表http://jsfiddle.net/t0yo0v84/有几个问题，但最紧迫的是右端边缘的锯齿状。

正如在 jsfiddle 中看到的那样，内容背景颜色的右侧没有完全覆盖整个 space 直到边界。那是什么原因？这是我的 CSS。我需要在页面中包含 table，这是必须的。 table 都是必需的。

html, body {
    min-width :100%;
    min-height:100%;
    padding:0;
    margin:0;
}
#wrapper {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin : 0.3em;
    border-style : solid;
    border-width : 0.18em;
    border-color : black;
    overflow-x : scroll;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.middle {
    background-color:green;
    height:100%;
}
.middle.row{
  overflow-x: auto; 
  overflow-y: hidden;
}
.bottom {
    background-color:rgba(30, 30, 30, 0.85);
    color : #FFF;
}
.top {
    background-color:pink;
}
.left {
    width:20%;
    background:#FFD540;
    height:100%;
}
.right {
    width: 78%;
    background:#E4E4E4;
    height:100%;
}

.top.row {
   height : 3%;
   width : 100%;
   margin : 2em;
   background-color : #F6F6F6;
}
.bottom.row {
   height : 20%;
   width : 100%;
   text-align :center;
}
.row > .cell{
  width : 100%;
}
.cell > #logo {
  position : relative;
  width : 22%;
  float : left;
  margin-left : 10px;
  margin-top : 15px;

}

.cell > #heading {
   width : 75%;
   text-align : center;
   float : left;
}
.banner {
    font-weight: bold;
    font-size: 2vw;
    color: black;
    font-family : Raleway;
    line-height: 0.9;
}
img {
  max-width : 100%;
  height : auto;
  margin-left: auto;
  margin-right: auto;
}


#data-table tr : first-child {
    background-color : lightgrey;
}
#top-table tr:first-child{
     background-color : lightgrey;
}
.tableInPage{
  overflow: auto;
}
#top-table {
   margin-top : 20px;
   margin-left : 10px;
}
#data-table {
   margin-top : 20px;
   margin-left : 10px;
}

#user-div {
   float : left;
   width : 22%;
   font-family : Raleway;
}
#acc-type-heading {
   float : left;
   width: 75%;
   font-family : Raleway;
}

.upper  {
   background-color:rgba(30, 30, 30, 0.85);
    color : #FFF;
    height :
}
table { 
  width: 100%; 
  border-collapse: collapse; 
}

#data-table tr:nth-of-type(odd) { 
  background: lightblue; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
#data-table-container{
   width : 1260px!important;
   overflow-x : scroll;
}
.menu-items {
  margin-left : 25px;
  margin-top : 70px;
  min-width: 200px;
}

是什么原因造成的，如何解决？

Answer 1

因为在您的 CSS 代码中，您必须删除两者的左边距：

#top-table {
    margin-top : 20px;
    /*margin-left : 10px;*/
}
#data-table {
    margin-top : 20px;
    /*margin-left : 10px;*/
}

如果去掉左边距，你会看到背景就是我想的那样。

Answer 2

这篇 fiddle 可能会对您有所帮助。不要在表上使用 margin，而是将其删除并在包含两个表的父元素上使用 padding

Answer 3

<td> 元素被 #data-table 和 #top-table css 规则中的 margin-left:10px 推高了 10px。这可以通过以下方式解决：

#data-table, #top-table {
  margin-top: 20px;
  margin-left: 0px; 
}

或者，如果你想保留左边距，只需给每个偶数行 background-color:grey; 和

#data-table tr  {
  background-color : lightgrey;
}
#top-table tr{
  background-color : lightgrey;
}

为什么最后锯齿状？如何修复 CSS 样式

Why the jaggedness at the end? How to fix the CSS style

html

css

layout