Why is this HTML table too wide for its container? - html

Question

I am building a page which will be holding a bunch of "leaderboard" style lists. During the development process everything was going well until I got to this latest section.
For some reason, even though each section is pretty much identical (aside from the actual numbers on the lists) this particular part breaks the layout.
Here is a JSFiddle of how it looked up the point where it broke:
https://jsfiddle.net/b91s32w8/
And here is a JSFiddle of how it looks now after adding in the code that broke it:
https://jsfiddle.net/w6rbx080/
The odd part is - that never happened until the following piece of code was added:
<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>
What I find strange about that is that piece of code uses the exact same CSS styling as the corresponding code from each of the other (working) sections. That CSS is as follows:
/* 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;
}
So if I can use that twice already without it breaking the layout, why is it breaking it on the third section? I can't see it being anything to do with the actual data within the table because it's pretty much identical.
Perhaps the answer is something so obvious I'm overlooking it, I don't know.

Answer 1

I think it's fixed when I removed display: table from .TLtabs

Answer 2

I actually fixed this myself shortly after posting by removing a "whitespace: nowrap" style that I had on a parent element.
As for the person who edited my question - Perhaps you'd like to explain what was wrong with me saying please and showing a bit of courtesy and politeness? And before you go correcting other people's grammar perhaps you should check your own! Read what you edited the title of my question to and come back to me when you spot your mistake!