Reputation: 2924
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
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
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
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