爲什麼這個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表格對於其容器來說太寬了？

回答

相關問題