IE8でtableのセルが広がってしまう

html css

横に広げたくないので、セル内容をdivで括ってmax-widthを指定したんですが、こんな風になってしまいます。

（下はmax-widthなし。）

CSS:

.my_table,
.my_table th,
.my_table td {
    border: 1px solid red;
}
.my_table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 10px;
    width: auto;
}
.my_table th,
.my_table td {
    padding: 4px;
}
.my_table div {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

HTML:

<table class="my_table">
  <tr>
    <td><div>あああああああああああああ</div></td>
    <td><div>WWWWWWWWWWWWWWWWWWWWWWWWWW</div></td>
  </tr>
</table>
<table class="my_table">
  <tr>
    <td>あああああああああああああ</td>
    <td>WWWWWWWWWWWWWWWWWWWWWWWWWW</td>
  </tr>
</table>

ううううむ？

その後→解決しました。

http://twitter.com/mr_myself00/status/16227852046:twitter:detail:right

というわけで、こんな感じですね。

.my_table div {
    overflow: hidden;
    max-height: 1em;
    max-width: 100px;
    word-break: break-all;
}

ありがとうございました！