如何将表格放在div中

我有一个div包含一个table有两行。如果单词之间有空格，一切都很好，但是如果我放了一个很长的单词（比如400 个字符） 在里面<td>，表将退出div。我怎样才能打破这个词并将其限制在<div> ?

Here https://jsfiddle.net/y4tgzohw/是我的演示。

html:

<div id="container">
    <table>
        <td>
            <tr>
                title
            <tr>
            <tr>
                contenttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
            </tr>
        </td>
    </table>
</div>

css:

#container{
    border: 2px solid;
    width: 50%;
    margin: 0 auto;
}

table{
   table-layout: fixed;
}

td{
   word-wrap:break-word;
}

应该指出的是，我无法定义width for <td>，因为我不希望所有的宽度都相同<td>

Here http://fiddle.jshell.net/mb39fs5d/5/就是我想要的。（假设没有空格）， 我怎样才能做到这一点 ？

您可能正在寻找 word-break CSS 属性，该属性用于指定是否在单词内换行：

td {
   word-wrap: break-word;
   word-break: break-all;
}

Demo http://fiddle.jshell.net/m73mcm74/

支持word-break还不错。请参阅MDN 文章 https://developer.mozilla.org/en-US/docs/Web/CSS/word-break了解更多信息。