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

Chr*_*rts 21 html css

我在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">
Run Code Online (Sandbox Code Playgroud)

编辑:不幸的是我无法对宽度进行硬编码,因为我正在动态生成HTML,它包括将div递归地嵌套在彼此内部(每个div上有左边距,这会创建一个很好的'嵌套'效果).

小智 16

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

table-layout: fixed;
width: 100%;
Run Code Online (Sandbox Code Playgroud)


Nat*_*ate 7

以下对我在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>
Run Code Online (Sandbox Code Playgroud)

请看这里的例子.