为什么这个HTML表格对于其容器来说太宽了？

我正在构建一个将持有一堆“排行榜”风格列表的页面。在开发过程中，一切都很顺利，直到我到最新的部分。为什么这个HTML表格对于其容器来说太宽了？

由于某些原因，即使每个部分几乎完全相同（除了列表上的实际数字），此特定部分也会破坏布局。

这里是它如何抬头的地步，它打破了的jsfiddle：

这里是它的现在看起来的jsfiddle在打破它的代码后添加：

的奇数部分是 - 从未发生过，直到溶液中加入下面的代码块：

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

所以，如果我可以使用已经两次没有它打破了布局，为什么它打破它的第三部分？我看不出它与表内的实际数据有什么关系，因为它几乎完全相同。

也许答案是如此明显，我忽略它，我不知道。

来源

2017-02-17 Chris Bush

什么是值得的 - 这篇文章的原文标题是语法正确！感谢编辑它的人，让我看起来像一个没受过教育的傻瓜！ –

我想，当我从.TLtabs

来源

2017-02-17 13:27:37

去除display: table通过删除“空白：NOWRAP”发布后不久，我其实解决了这个问题我自己它是固定的，我有一个父元素的风格。

至于编辑我的问题的人 - 也许你想解释我说的有什么不对，并表现出一点礼貌和礼貌？在你纠正其他人的语法之前，或许你应该检查你自己的语法！阅读你编辑我的问题的标题，并在你发现错误时回到我身边！

来源

2017-02-18 16:25:41

为什么这个HTML表格对于其容器来说太宽了？

回答

相关问题