CODEWITHSUNDEEP
htmlcsslayout
John Doe
John Doe

Reputation: 2924

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

Here is my stylesheet http://jsfiddle.net/t0yo0v84/ there are several problems but the most pressing one is the jaggedness at the edges on the right end.

As can be seen in the jsfiddle the right side of the content's background-color is not covering the whole space perfectly till the boundary. What cause that ? Here is my CSS. I need to have the table in the page its a must. Both the tables are required.

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

What causes that and how to fix that?

Upvotes: 0

Views: 35

Answers (3)

RepeatQuotations
RepeatQuotations

Reputation: 724

The <td> elements are being pushed 10px over by margin-left:10px in the #data-table and #top-table css rules. This can be fixed by:

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

Alternatively, if you want to keep the left margin just give every even row background-color:grey; with 

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

Upvotes: 1

Alex
Alex

Reputation: 196

This fiddle might help you. Instead of using margin on the tables, remove it and use padding on the parent element which holds the two tables

Upvotes: 1

Rotan075
Rotan075

Reputation: 2615

Because in your CSS code you have to remove the margin-left of both:

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

If you remove the margin-left, you will see that the background is what I think what you want.

Upvotes: 1

Related Questions