html - 内联 block 元素内表格的宽度

Question

我在一个 div(width:100%) 中有两个内联 block 元素(width: 50%)。在第一个内联 block 元素中，我有包含许多列的表格。此表格未以其给定的 50% 宽度呈现。 (它位于第二个内联 block 元素下。)

<style>
#col1 {
    display: inline-block;
    background-color: red;
    width:50%;
    vertical-align: top;
}

#col2 {
    display: inline-block;
    background-color: green;
    width:50%;
    vertical-align: top;
}
</style>



<div>
<div id="col1"><table><tr><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td></tr><tr><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td></tr></table></div><div id="col2">content</div></div>

请参阅此示例:http://jsfiddle.net/6L3h8h7k/

在上面的例子中，表格的第一行被第二个行内 block 元素重叠。

如何让这个表格只占据 50% 的宽度。

好心人帮我解决这个问题。

提前致谢。

Answer 1

将此样式添加到您的表中

table {
    width: 100%;
    table-layout: fixed;
}