table宽度失效-table布局的问题

项目中table布局还是比较常用的，遇到了一个table宽度失效的问题。先上代码：

    <div style="width:800px;margin: 60px;">        <table style="width: 100%;max-width: 100%;">            <tbody>                <tr style="max-width: 900px;overflow: hidden;">                    <td style="max-width: 1000px;" >                        <div style="width: 1100px;">                            <p style="width: 1200px;">测试文本rem由来：                                                          </p>                        </div>                    </td>                    <td>rem由来：font size of the root element，那么rem是个单位，                    </td>                    <td>rem由来：font size of the root element，那么rem是个单位，                    </td>                </tr>                <tr style="max-width: 900px;overflow: hidden;">                    <td style="max-width: 1000px;" >                        <div style="width: 1100px;">                            <p style="width: 1200px;">测试文本rem由来：                                                          </p>                        </div>                    </td>                    <td>rem由来：                    </td>                    <td>rem由来：                    </td>                </tr>            </tbody>        </table>    </div>

此时td的宽度还是自身设置的宽度，而tr设置的宽900px和table本身设置的宽度100%都失效了，变成了1167px;它们的宽既不是子元素中最宽的1200px；也不是它们本身设置的宽度，这么来看是浏览器对它们的宽做了自动分配处理，我个人的理解是tr本身就是代表一行，所以不会通过换行的方式来显示超过本身宽度的元素，于是出现了下面图的显示效果；有时候虽然td里面的div并没有手动设置宽度，但是还是偶尔莫名其妙的把tr撑开了。。。