如何使 HTML 表格的宽度与其包含的 div 标签的宽度相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/74612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an HTML table the same width as its containing div tag?
提问by Chris Roberts
I have a table inside a div. I want the table to occupy the entire width of the div tag.
我在 div 中有一张桌子。我希望表格占据 div 标签的整个宽度。
In the CSS, I've set the widthof the table to 100%. Unfortunately, when the div has some marginon it, the table ends up wider than the div it's in.
在 CSS 中，我已将width表的设置为100%。不幸的是，当 div 上有一些margin时，表格最终会比它所在的 div 宽。
I need to support IE6 and IE7 (as this is an internal app), although I'd obviously like a fully cross-browser solution if possible!
我需要支持 IE6 和 IE7（因为这是一个内部应用程序），尽管如果可能的话，我显然想要一个完全跨浏览器的解决方案！
I'm using the following DOCTYPE...
我正在使用以下 DOCTYPE ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Edit: Unfortunately I can't hard-code the width as I'm dynamically generating the HTML and it includes nesting the divs recursively inside each other (with left margin on each div, this creates a nice 'nested' effect).
编辑：不幸的是，我无法对宽度进行硬编码，因为我正在动态生成 HTML，它包括将 div 递归地嵌套在彼此内部（每个 div 上都有左边距，这会创建一个很好的“嵌套”效果）。
回答by Sharad Biradar
Add the below CSS to your <table>:
将以下 CSS 添加到您的<table>：
table-layout: fixed;
width: 100%;
回答by Nate
The following works for me in Firefox and IE7... a guideline, though is: if you set width on an element, don't set margin or padding on the same element. This holds true especiallyif you're mixing units -- say, mixing percents and pixels.
以下在 Firefox 和 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>
See herefor an example.
有关示例，请参见此处。
回答by Eric DeLabar
Percentage-based widths are relative to the first parent element that has a width specified. If your div does not have a width specified then the width of the table has nothing to do with it. Can you post a simplified version of the markup that shows what your DOMtree looks like?
基于百分比的宽度相对于具有指定宽度的第一个父元素。如果您的 div 没有指定宽度，那么表格的宽度与它无关。你能发布一个简化版本的标记来显示你的DOM树的样子吗？
From another angle, if your parent div DOES have a width set and the margin is still affecting your table then you are probably in quirks mode. You have specified your DOCTYPE, but be aware that the DOCTYPEelement MUST be the first line in the file. Something else to note when dealing with IE6, by default, if your content is wider than your parent, the parent will be stretched to accommodate, you can stop this by adding overflow: hiddento your cssfor the parent element but in the process you might obscure some of the child element's content.
从另一个角度来看，如果您的父 div 确实设置了宽度并且边距仍在影响您的表格，那么您可能处于怪癖模式。您已指定您的DOCTYPE，但请注意该DOCTYPE元素必须是文件中的第一行。处理时要注意的其他事项IE6，默认情况下，如果您的内容比您的父元素宽，则父元素将被拉伸以适应，您可以通过添加overflow: hidden到您css的父元素来阻止这种情况，但在此过程中您可能会掩盖一些子元素的内容。
回答by David Heggie
Not really sure what the problem is here - this works fine in IE6/7 and FF3. Setting the width of the .container DIV element sets the table's width. Adding margins to the .container div doesn't affect the table. Maybe there's something else in your markup / CSS that's affecting the layout?
不太确定这里的问题是什么 - 这在 IE6/7 和 FF3 中工作正常。设置 .container DIV 元素的宽度会设置表格的宽度。向 .container div 添加边距不会影响表格。也许您的标记/CSS 中还有其他影响布局的东西？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Boxes and Tables</title>
<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>
<div class="container">
<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>
</div>
</body>
</html>
回答by Chris
I figured out the heart of the problem here. It has to do with border-collapse. I've had this same problem for a while now. Since tables often have thin borders the problem is not obvious to most people. If you put a regular table with width set to 100% inside a div, as Nate has, you will be fine.
我在这里找到了问题的核心。它与border-collapse. 我已经有一段时间了同样的问题。由于表格通常有细边框，因此对于大多数人来说这个问题并不明显。如果像 Nate 那样将宽度设置为 100% 的普通表格放在 div 中，则不会有问题。
However, if you specify border-collapse:collapseon the table, the table will break out of the div. This is not obvious to most people because it may only break out by one pixel, or depending on the context it's in and the user agent, perhaps not at all.
但是，如果border-collapse:collapse在表上指定，则表将脱离 div。这对大多数人来说并不明显，因为它可能只爆发一个像素，或者取决于它所处的上下文和用户代理，可能根本没有。
To make it clearer what is going on, try this: Put Nate's example next to David Heggie's example in an html file.
为了更清楚地说明发生了什么，请尝试以下操作：将 Nate 的示例放在 html 文件中 David Heggie 的示例旁边。
It will look like both work fine. But now, change Nate's inline TD style to border: 40px solid blue. Change David's table td style to border: 40px solid #999;. At this point, David's table breaks out of the div by 50% of its border on each side. Nate's still works.
Put a border-collapse:collapsestyle on Nate's table and his breaks now too.
看起来两者都可以正常工作。但是现在，将 Nate 的内联 TD 样式更改为border: 40px solid blue. 将 David 的表 td 样式更改为border: 40px solid #999;. 在这一点上，David 的表格从 div 的每一侧突破其边框的 50%。内特还在工作。border-collapse:collapse在 Nate 的桌子上放一个样式，他现在也休息一下。
It's the border-collapsethat is causing it!
是它border-collapse造成的！
回答by Joe Morgan
I've always used <table width="100%">
我一直用 <table width="100%">
回答by Nate
In the case where you're automatically generating code that may have margins on it, adding a simple, unstyled <div>element wrapping your table might do the trick.
如果您自动生成可能有边距的代码，添加一个简单的、无样式的<div>元素来包裹您的表格可能会奏效。
回答by buti-oxa
That is the big problem with the way CSS treats width property and the reason Microsoft implemented box model differently at first. Microsoft lost, and now it's either width or margin/padding/border for an element.
这就是 CSS 处理 width 属性方式的一个大问题，也是微软最初以不同方式实现盒模型的原因。微软输了，现在它是元素的宽度或边距/填充/边框。
Situation may change to better in CSS3 with box-sizing property
使用box-sizing 属性的CSS3中的情况可能会变得更好
回答by Christian Davén
Maybe this extensive article about Internet Explorer and the CSS box modelwill help?
也许这篇关于Internet Explorer 和 CSS 盒模型的广泛文章会有所帮助？
回答by farzad
try this:
尝试这个：
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
by setting the padding of the div to zero, you will remove the space between the borders of the div and the content of it. by setting the width of the table to 100% and it's margin to zero, you will remove the space between the borders of the table and it's container.
通过将 div 的填充设置为零，您将删除 div 边框与其内容之间的空间。通过将表格的宽度设置为 100% 并将其边距设置为零，您将删除表格边框与其容器之间的空间。
