Question

我在div中放置了一个表格，并将表格宽度设置为100％。我在div的表格左侧放置了一个图标，因此我使用了margin-left属性将表格移过来，并使用position:absolute和top以及{{1属性。这一切都很好，但是表格宽度在父div之外移动 - 显然是因为left设置。因为我需要根据浏览器窗口的宽度动态扩展表格，所以我不能只设置一个固定的大小来保持表格在div中。最终，我可以将表格中的所有div内容包装起来并以这种方式布局元素，但我希望通过调整我的CSS来获得更好，更简单的解决方案。谢谢！

我想要实现的目标：

left-margin

我得到了什么：

|-margin-|
+--------------------------------------------------------------------+
| (div)   +---------------------------------------------------------+|
|         | (table)                                                 ||
|         |                                                         ||
|         +---------------------------------------------------------+|
+--------------------------------------------------------------------+

更新：
感谢所有的建议。当我输入一个更长时间的响应时，答案就明白了。我认为|-margin-| +--------------------------------------------------------------------+ | (div) +----------------------------------------------------------|-------+ | | (table) | | | | | | | +----------------------------------------------------------|-------+ +--------------------------------------------------------------------+意味着“填充但仍保留在父元素的边界内”，而不是“假设父元素的指定宽度”。由于表上设置的width:100%属性导致了我删除它的所有麻烦，只需设置div的margin-left:80px即可解决问题。

@Ace - 我真的不是“要求别人为我做所有工作”。既然我完全描述了我的所作所为，我认为非常简单的CSS不是必需的，但我想它可能会有所帮助。所以在这里，以及最终的CSS工作：

原css：

padding-left:80px

最终的css：

.mydiv {
position:relative;
border:1px solid #000000;
}
.myicon {
position:absolute;
left:20;
top:15;
}
.mytable {
border:1px solid #000000; //so I can see it
table-layout:auto;
width:100%;
margin-left:80px;
}

Answer 1

如果您在包装DIV中将ICON设为 CSS背景图片，您只需要在桌面上留下一些余量，一切都会很好。

Answer 2

试试这个：

#tableID{
    left:100px; // the margin left
    right:10px;
}

它适用于div，但没有尝试使用表

Answer 3

删除了表margin-left:80px并将padding-left:80px添加到div容器中：

.mydiv {
position:relative;
padding-left:80px;
border:1px solid #000000;
}
.myicon {
position:absolute;
left:20;
top:15;
}
.mytable {
border:1px solid #000000; //so I can see it
table-layout:auto; 
width:100%;
}

左边距移位表延伸到父div之外

3 个答案: