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

Question

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

正如在 jsfiddle 中所见，内容背景颜色的右侧并没有完美地覆盖整个空间直到边界。那是什么原因？这是我的 CSS。我需要在页面中放置表格，这是必须的。两个表都是必需的。

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

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