Question

我在div中有两个内联块元素（宽度：50％）（宽度：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是here

将您的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;}

添加＆＃34; co＆＃34; id到你的第一个div

<div id="co">

内联块元素内表的宽度

2 个答案: