Html 内联块元素内表格的宽度

我在一个div（宽度：100%）中有两个内联块元素（宽度：50%）。 在第一个内联块元素中，我有一个包含许多列的表。此表不会以给定的50%宽度呈现。（它位于第二个内联块元素下。）

#可乐{
显示：内联块；
背景色：红色；
宽度：50%；
垂直对齐：顶部；
}
#可乐{
显示：内联块；
背景颜色：绿色；
宽度：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>

如何使这张桌子只占50%的宽度

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

---

提前感谢。

将此样式添加到您的表格中

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

JSFIDLE是

把你的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;}

将“co”id添加到您的第一个div

<div id="co">

您希望表的行为如何？是否要将表列换行以使它们都适合？是否要隐藏“额外”列？您希望得到的结果是什么样的？在本例中，所做的只是折叠单个单元格的宽度，以尝试适合所需的空间，从而导致单元格的内容彼此重叠。是的，如果您希望表格适合单元格重叠的框内，则单元格不能像文本一样包装。这就是问题所在“如何使这张桌子只占50%的宽度。”我想不用说，内容应该仍然清晰可辨。我认为内容是虚设的吗？