Table width is longer then the pixels specified?

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.

Answer 2

As Ned said, the long word is causing the cell to expand.

You can partially solve this by adding word-wrap: break-word; to the style attribute of the table cell. This will cause the word to break when it reaches the limits of the table cell. Fully supported in IE and any CSS3-supporting browsers.