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

Question

我在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">

---

编辑 ：不幸的是，当我动态生成HTML时，我无法对宽度进行硬编码，它包括将div递归嵌套在彼此之间（每个div上留有空白，这会产生很好的“嵌套”效果）。

Answer 1

将以下CSS添加到您的<table> ：

table-layout: fixed;
width: 100%;

Answer 2

以下内容在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>

请参阅此处的示例。

Answer 3

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

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

Answer 4

不太确定问题出在哪里-在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>

Answer 5

我在这里找出了问题的核心。 它与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 ！

Answer 6

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

Answer 7

我一直使用<table width="100%">

Answer 8

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

Answer 9

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

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

尝试复制并粘贴在上面（仅将样式部分移至标题或单独的.css文件），也许您使用的将CSS内联（使用样式标签）的方式与问题有关，还是围绕div表块的其他CSS？ 漂浮也会带来麻烦。

PS我设置了红色和蓝色边框，以查看区域扩展到的位置，以便进行更直观的检查。

Answer 10

那是CSS对待width属性的方式存在的最大问题，也是Microsoft首先以不同的方式实现box模型的原因。 微软输了，现在元素的宽度或边距/边距/边框。

具有box-sizing属性的 CSS3的情况可能会变得更好

Answer 11

也许这篇有关Internet Explorer和CSS框模型的文章会有所帮助？

Answer 12

尝试这个：

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

通过将div的填充设置为零，您将删除div的边框及其内容之间的空格。 通过将表格的宽度设置为100％并将其边距设置为零，您将删除表格边框与其容器之间的空间。

Answer 13

顺便说一句，您是否有充分的理由不使用严格的doctype？ 严格应该始终是默认设置。 过渡式仅适用于遗留代码。