CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcss-tables
rolomcflurry
rolomcflurry

Reputation: 117

CSS Table alignment issue

I'm working on a table here using a combination of Bootstrap + manual CSS.

http://rgmgstandings.tk/

For some reason the second table is aligned slighty to the right.

Can someone inspect the page and explain to me why this is happening?

Heres the CSS I've used if needed:

<style>
body {
    font-family:'VERDANA', tahoma, verdana, arial, sans-serif;
    font-size:125%;
}

tr:nth-child(even) {background: #FFFFFF}
tr:nth-child(odd) {background: #ECECEC}


table.table-condensed td.team {
    text-align: left;
    font-weight: bold;
}

table.table-condensed th.team {
    text-align: left;
}

tr.top {
    background: #666666;
    color: white;
}

th.pts {
    background: #F3F3F3;
    color: black;
    text-align: center;
}

.table>tbody>tr>td {
    border-top: 1px solid black;
}

td.pts {
    background: #F3F3F3;
    color: black;
    font-weight: bold;
    text-align: center;
}

th.otl {
    width: 6%;
}

td.otl {
    text-align: center;
}

table.table-condensed td {
    text-align: center;
    border: 1px solid grey;
}

table.table-condensed th {
    text-align: center;
    border: 1px solid black;
    border-top: 1px solid black;
}

td.rank {
    width: 5px;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 1px solid black;
}

</style>

Upvotes: 0

Views: 168

Answers (1)

Dyrandz Famador
Dyrandz Famador

Reputation: 4525

place the inner container(red box) outside the parent container(blue box). they must be on the same hierarchy

enter image description here

They should look like this:

enter image description here

Upvotes: 1

Related Questions