Question

http://jsfiddle.net/L2yLe/

The fiddle says it all. I want a css-only solution that limits the width of the table to the width of the div. The long string should be broken (but as you can see it isn’t), and that causes the table to overflow.

I don’t want to use any pixel widths. This should be completely fluid.

<div>
<table>
    <tr>
        <td>
            short string
        </td>
        <td>
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata
        </td>
        <td>
            short string
        </td>
    </tr>
</table>
</div>

div {
    width: 50%;
    background-color: darkgray;
    padding: 15px;
    margin: 10px auto;
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

Answer 1

Guys take a look on http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
   -ms-word-break: break-all;
   word-break: break-all;

   /* Non standard for webkit */
   word-break: break-word;

   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;