Question

Here is my html but when I measure the last td its way longer then 300px…any idea?

<table width='400'>
    <tr>
        <th colspan='2' style='text-align:left;'><br /><br />Beginner<br /><br /></th>
    </tr>
    <tr>
      <th>Title</th>
      <th>another Deal</th>

      <th>Users</th>

    </tr>
  <tr>  
    <td>SomeDat</td>
    <td>0/38</td>
    <td style="width:300px">
        <span class="red"></span> <span class="yellow"></span></td>

  </tr>
  <tr>  
    <td>Git</td>
    <td>28/38</td>
    <td style="width:300px">
        <span class="red">something,something,something,something,something,something,something,something,something,something,something,    ,something,something,something,something,something</span> <span class="yellow">test</span></td>
  </tr>
</table>

Answer 1

The table will expand to the width needed for its widest element. “something,something,…” is a very long unbreakable word, and is forcing your table wider than you want it.

If you add spaces, the text will wrap. If you want to clip long unbreakable words, try overflow:hidden in the style.