Question

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

在CSS中，我将表格的宽度设置为100％。不幸的是，当div有一些余量时，表格会比它所在的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>

有关示例，请参阅here。

Answer 3

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

从另一个角度来看，如果您的父div已经设置了宽度并且边距仍在影响您的表格，那么您可能处于怪癖模式。您已指定DOCTYPE，但请注意DOCTYPE元素必须是文件中的第一行。在处理IE6时需要注意的其他事项，默认情况下，如果您的内容比父母更宽，则会延长父级以适应，您可以通过向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有关。我有一段时间同样的问题。由于表格通常具有薄边框，因此对大多数人来说问题并不明显。如果你把一个宽度设置为100％的常规表放在div中，就像Nate一样，你会没事的。

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

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

看起来两者都很好。但现在，将Nate的内联TD风格改为border: 40px solid blue。将David的table td样式更改为border: 40px solid #999;。在这一点上，大卫的桌子突破了每边50％的边界。 Nate仍然有效。在Nate的桌子上放一个border-collapse:collapse样式，现在他也休息了。

导致它的是border-collapse！

Answer 6

如果你自动生成可能有边距的代码，添加一个简单的，没有样式的<div>元素包装你的表就可以了。

Answer 7

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

Answer 8

这是CSS处理宽度属性的方式的一个大问题，以及微软最初实现盒子模型的原因。微软输了，现在它是一个元素的宽度或边距/填充/边框。

使用box-sizing property

，CSS3中的情况可能会变得更好

Answer 9

也许这篇关于Internet Explorer and the CSS box model的文章会有所帮助吗？

Answer 10

试试这个：

div {
 padding: 0px;
}

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

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

Answer 11

顺便说一下，您是否有充分的理由不使用严格的doctype？ strict应该始终是默认值。 transitional仅适用于遗留代码。

Answer 12

以下代码适用于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？浮动也会带来麻烦。

P.S。我设置了红色和蓝色边框，以查看区域扩展到哪里以进行更直观的检查。

Answer 13

溢出：自动;如果你看到奇怪的东西，最外面的div可能会有所帮助 - 比如最外面的div比你想要的要小或者不占用它内部div的整个大小。

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

13 个答案: