内联块元素中表的宽度

Question

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

<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/

在上面的示例中，表的第一行被第二个内联块元素重叠。

如何使此表仅占50%的宽度。

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

提前谢谢。

Answer 1

将此样式添加到您的表中

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

Answer 2

JSFiddle是这里

将您的css更改为此

#co {
     display: inline-block;
}
#col1 {
    background-color: red;
    width:50%;
    float:left;
}

#col2 {
    float:right;
    background-color: green;
    width:50%;
}

tr td { display:inline-block;}

在第一个div中添加"co“id。

<div id="co">