Word-wrap: break-word с div внутри td - программирование

Я пытаюсь использовать свойство word-wrap CSS с значением break-word. Я хочу использовать это внутри td, и, видимо, для этого нужно использовать дополнительный тег div. хорошо.

Я попытался создать упрощенный прецедент:

HTML:

<table class="sectors">
  <tr>
    <td><div>HURTEAUX / Jean-Baptiste mr)</div></td>
    <td><div>CHEUNJGgdfgdfvfsefsdfsdfsdfsdvvvHJG / Samuel mr</div></td>
    <td><div>CHEUNG / Samuel mr)</div></td>
  </tr>
</table>

CSS

.sectors td {
  border: 1px solid #000;
}

.sectors td div {
  width: 150px;
  word-wrap: break-word;
  border: 1px solid red;
}

Проблема

Firefox, Chrome и Safari ведут себя как ожидалось (по крайней мере, как я ожидаю).

снимок экрана в Firefox 3.5

Но IE (IE6, IE7, IE8) имеет странное поведение: текст правильно завернут внутри div (красная рамка), но кажется, что td (черная рамка) выделяет дополнительное пространство без причины.

снимок экрана в IE7

Любое обходное решение или объяснение?

Проблема

Ответ 1