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

【问题标题】：Why is this HTML table too wide for its container?为什么这个 HTML 表格对于它的容器来说太宽了？
【发布时间】：2017-07-07 00:58:14
【问题描述】：

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

出于某种原因，即使每个部分几乎相同（除了列表中的实际数字），这个特定部分也会破坏布局。

这是一个 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;
}

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

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

【问题讨论】：

为了它的价值 - 这篇文章的原标题在语法上是正确的！感谢编辑它的人，让我看起来像一个没有受过教育的傻瓜！

标签： html css html-table

【解决方案1】：

我实际上是在发布后不久自己修复了这个问题，方法是删除我在父元素上的“空白：nowrap”样式。

至于编辑我的问题的人 - 也许你想解释一下我说拜托并表现出一点礼貌和礼貌有什么问题？在你去纠正别人的语法之前，也许你应该检查自己的！阅读您将我的问题标题编辑为的内容，并在发现错误时回复我！

【讨论】：

【解决方案2】：

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

【讨论】：