Почему эта таблица 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

Я думаю, что это фиксируется, когда я удалил display: table из .TLtabs

Answer 2

Я на самом деле это исправил сам вскоре после публикации, удалив «пробел: Nowrap» стиль, который я имел на родительский элемент.

Что касается человека, который отредактировал мой вопрос - Возможно, вы хотели бы объяснить, что не так со мной, сказав пожалуйста и проявив немного вежливости и вежливости? И прежде чем вы начнете исправлять грамматику других людей, возможно, вы должны проверить свое собственное! Прочитайте, что вы редактировали заголовок моего вопроса, и возвращайтесь ко мне, когда вы заметили свою ошибку!