Word-wrap in an HTML table

Question

I've been using word-wrap: break-word to wrap text in divs and spans. However, it doesn't seem to work in table cells. I have a table set to width:100%, with one row and two columns. Text in columns, although styled with the above word-wrap, doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.

Here's what the source looks like:

td {    border: 1px solid;  }

<table style="width: 100%;">    <tr>      <td>        <div style="word-wrap: break-word;">          Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word        </div>      </td>      <td><span style="display: inline;">Short word</span></td>    </tr>  </table>

The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.

Answer 1

The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute

td {    border: 1px solid;  }

<table style="table-layout: fixed; width: 100%">    <tr>      <td style="word-wrap: break-word">        LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord      </td>    </tr>  </table>