如何使HTML表格具有与其包含的div标签相同的宽度？
如何使HTML表格具有与其包含的div标签相同的宽度？
提问于 2008-09-16 17:07:32
我在div中有一张表。我希望表格占据div标签的整个宽度。
在CSS中，我将表的width设置为100%。不幸的是，当div上有一些margin时，表最终会比它所在的div更宽。
我需要支持IE6和IE7 (因为这是一个内部应用程序)，尽管如果可能的话，我显然想要一个完全跨浏览器的解决方案！
我正在使用下面的DOCTYPE。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">编辑：不幸的是，我不能硬编码宽度，因为我是动态生成的，它包括递归地将div嵌套在彼此之间(在每个div上留出左边距，这会产生一个很好的‘嵌套’效果)。
回答 13
Stack Overflow用户
发布于 2015-02-20 13:58:56
将下面的CSS添加到您的<table>
table-layout: fixed;
width: 100%;Stack Overflow用户
发布于 2008-09-16 17:18:25
以下是我在火狐和IE7中的工作。不过，有一条原则是:如果你在一个元素上设置了宽度，就不要在同一元素上设置边距或填充。这是正确的，特别是当你混合单位时--比如说，混合百分比和像素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width: 500px; background-color:#F33;">
This is the outer div
<div style="background-color: #FAA; padding: 10px; margin:10px;">
This is the inner div
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
</tr>
</table>
</div>
</div>
</body>
</html>有关示例，请参阅here。
Stack Overflow用户
发布于 2008-09-16 20:17:53
基于百分比的宽度相对于具有指定宽度的第一个父元素。如果您的div没有指定宽度，那么表的宽度与其无关。你能发布一个简化版本的标记来显示你的DOM树的样子吗？
从另一个角度来看，如果您的父div确实设置了宽度，并且边距仍然影响您的表，那么您可能处于怪癖模式。您已经指定了DOCTYPE，但请注意DOCTYPE元素必须是文件中的第一行。在处理IE6时需要注意的另一点是，默认情况下，如果您的内容比父元素宽，父元素将被拉伸以容纳，您可以通过将overflow: hidden添加到父元素的css来停止这种情况，但在此过程中，您可能会模糊一些子元素的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74612
复制相关文章
相似问题