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

だから私は、なぜそれが3番目のセクションでそれを壊している、それはレイアウトを壊すことなく、すでにその倍を使用することができますか？私はテーブル内の実際のデータとは何の関係もないのですが、それはかなり同じですから。

おそらく、答えは分かりやすいので、私はそれを見落としている、私は知らない。私は親要素の上に持っていたスタイル：

Answer 1

は、私は私が実際にすぐに「NOWRAP空白」を除去することにより、投稿した後、この自分自身を固定.TLtabs

Answer 2

からdisplay: tableを削除するとき、それは固定だと思います。

私の質問を編集した人は、おそらく、私が間違っていたことを説明したいと思います。礼儀正しく、丁寧さを示していますか？そして、あなたが他の人々の文法を訂正する前に、おそらく自分自身をチェックするべきです！私の質問のタイトルを編集したものを読んで、あなたの間違いを見つけたら私に戻ってきてください！