Ширина таблицы больше указанных пикселей?

Question

Вот мой html, но когда я измеряю последний тд, он длиннее 300px ... какая-нибудь идея?

<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

Таблица расширится до ширины, необходимой для ее самого широкого элемента. «что-то, что-то ...» - это очень длинное неразрывное слово, которое заставляет ваш стол шире, чем вы хотите.

Если вы добавите пробелы, текст будет перенесен. Если вы хотите обрезать длинные неразрывные слова, попробуйте overflow:hidden в стиле.

Answer 2

Как сказал Нед, длинное слово заставляет клетку расширяться.

Вы можете частично решить эту проблему, добавив word-wrap: break-word; к атрибуту стиля ячейки таблицы. Это приведет к разрыву слова, когда оно достигнет пределов ячейки таблицы. Полностью поддерживается в IE и любых браузерах, поддерживающих CSS3.