html - 为什么这个 HTML 表格对于它的容器来说太宽了？

Question

我正在构建一个包含一堆“排行榜”样式列表的页面。在开发过程中，一切进展顺利，直到我到达最新的部分。

出于某种原因，尽管每个部分几乎相同(除了列表中的实际数字)，但这个特定部分破坏了布局。

这是一个 JSFiddle，说明它如何查找它崩溃的点:

https://jsfiddle.net/b91s32w8/

这是一个 JSFiddle，显示了在添加破坏它的代码后它现在的样子:

https://jsfiddle.net/w6rbx080/

奇怪的是 - 在添加以下代码之前从未发生过:

    <table class="toplist-data">
    <tbody class="toplist-body">
            <th class="toplist-left"> No. </th>
            <th class="toplist-middle"> Chat Name </th>
            <th class="toplist-right"> Profile Visits </th>
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 1. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 300 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 2. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 250 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 3. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 200 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 4. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 170 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 5. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 150 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 6. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 120 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 7. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 110 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 8. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 90 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 9. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 50 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 10. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 25 </td>
        </tr> 
   </tbody> 
</table>

令我感到奇怪的是，这段代码使用了与每个其他(工作)部分的相应代码完全相同的 CSS 样式。该 CSS 如下:

    /* Individual TopList Tables */

table.toplist-data {
    font-size: 14px;
    width: 100%;
}


table.toplist-data th {
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.toplist-left, .toplist-data-left {
    width: 5%;
    text-align: left;
}

.toplist-middle, .toplist-data-middle {
    width: 70%;
    text-align: left;
    padding-left: 20px;
}

.toplist-right, .toplist-data-right {
    width: 20%;
    text-align: right;
}

所以如果我已经可以在不破坏布局的情况下使用它两次，为什么它会在第三部分破坏它？我看不出它与表中的实际数据有任何关系，因为它们几乎完全相同。

也许答案太明显了，我忽略了它，我不知道。

Answer 1

我认为当我从 .TLtabs 中删除 display: table 时它已修复