CSS Table 对齐问题

Question

我正在使用 Bootstrap + 手动 CSS 的组合来处理 table。

出于某种原因，第二个 table 稍微向右对齐。

有人可以检查页面并向我解释为什么会这样吗？

这是我在需要时使用的CSS：

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

Answer 1

将内部容器（红色框）放在父容器（蓝色框）外面。他们必须在同一层级

它们应该是这样的：

CSS Table 对齐问题

CSS Table alignment issue

html

css

twitter-bootstrap

css-tables