关于CSS：如何使HTML表格的宽度与其包含div标签的宽度相同？

How do I make an HTML table the same width as its containing div tag?

我在div内有一张桌子。我希望表格占据div标签的整个宽度。

在CSS中，我已将表的width设置为100%。不幸的是，当div上有一些margin时，表最终比其所在的div宽。

我需要支持IE6和IE7(因为这是一个内部应用程序)，但如果可能的话，我显然希望使用完全跨浏览器的解决方案！

我正在使用以下DOCTYPE ...

1	<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

编辑：不幸的是，我无法动态编码宽度，因为我正在动态生成HTML，它包括将div递归嵌套在彼此之间(每个div上留有空白，这会产生很好的"嵌套"效果)。

将以下CSS添加到您的

中：

1 2	table-layout: fixed; width: 100%;

以下内容在Firefox和IE7中对我有用...一条准则是：如果在元素上设置宽度，请不要在同一元素上设置边距或填充。这尤其适用于混合单位(例如，混合百分比和像素)的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
Test
</head>
<body>

This is the outer div

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>

</body>
</html>

请参阅此处的示例。

基于百分比的宽度相对于具有指定宽度的第一个父元素。如果您的div没有指定宽度，则表的宽度与它无关。您可以发布标记的简化版本来显示DOM树的外观吗？

从另一个角度来看，如果您的父div确实设置了宽度并且边距仍在影响您的表格，那么您可能处于怪癖模式。您已经指定了DOCTYPE，但要注意DOCTYPE元素必须是文件的第一行。默认情况下，在处理IE6时要注意其他事项，如果您的内容比父对象宽，则父对象会被拉伸以容纳，您可以通过在css中为父元素添加overflow: hidden来停止此操作，但是在此过程中，您可能会遮掩某些子元素的内容。

不太确定问题出在哪里-在IE6 / 7和FF3中可以正常工作。设置.container DIV元素的宽度可设置表格的宽度。在.container div中添加边距不会影响表格。也许您的标记/ CSS中还有其他东西会影响布局？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
Boxes and Tables
<style type="text/css">

div.container {
background-color: yellow;
border: 1px solid #000;
width: 500px;
margin: 5px auto;
}

table.contained {
width: 100%;
border-collapse: collapse;
}

table td {
border: 2px solid #999;
}

</style>
</head>

<body>

<table class="contained">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
</thead>
<tbody>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
</tbody>
</table>

</body>
</html>

我在这里找出了问题的核心。它与border-collapse有关。我已经有相同的问题一段时间了。由于桌子的边框通常很薄，因此对于大多数人来说，问题并不明显。如果像Nate一样在div内放置一个宽度设置为100％的常规表，那很好。

但是，如果在表上指定border-collapse:collapse，则该表将脱离div。这对于大多数人来说并不明显，因为它可能只会出现一个像素，或者取决于它所处的上下文和用户代理，也许根本不会出现。

为了使发生的事情更清楚，请尝试以下操作：在HTML文件中，将Nate的示例放在David Heggie的示例旁边。

看起来两者都可以正常工作。但是现在，将Nate的嵌入式TD样式更改为border: 40px solid blue。将David的表td样式更改为border: 40px solid #999;。此时，David的桌子超出了div两侧边界50％的范围。内特仍在工作。
在Nate的桌子上放一个border-collapse:collapse样式，现在他的休息时间也放。

导致它的是border-collapse！

我一直使用

如果您是自动生成可能带有边距的代码，则添加一个简单的，未样式化的元素来包装表格就可以解决问题。

溢出：自动；如果您看到奇怪的东西，则最外面的div上的内容可能会有所帮助-例如最外面的div小于您想要的div或不占用里面的div的整个大小。

以下代码适用于IE6 / 8，Chrome，Firefox，Safari：