我在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上留有空白,这会产生很好的“嵌套”效果)。

===============>>#1 票数:15

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

table-layout: fixed;
width: 100%;

===============>>#2 票数: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>

请参阅此处的示例。

===============>>#3 票数:4

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

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

===============>>#4 票数:3

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

===============>>#5 票数:2

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

===============>>#6 票数:1

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

===============>>#7 票数:1

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

===============>>#8 票数:0

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

===============>>#9 票数:0

以下代码适用于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我设置了红色和蓝色边框,以查看区域扩展到的位置,以便进行更直观的检查。

===============>>#10 票数:0

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

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

===============>>#11 票数:0

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

===============>>#12 票数:0

尝试这个:

div {
 padding: 0px;
}

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

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

===============>>#13 票数:0

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

  ask by Chris Roberts translate from so

未解决问题?本站智能推荐:

2回复

HTML / CSS:表格宽度与div相同

我想创建一个包含表格的表单。 我用div和div里面,有一张桌子。 我希望表格宽度与div宽度相同。 div宽度为100%。 但是结果是,表格宽度不适合div宽度。 下面是代码: 有人可以帮忙吗?
1回复

如何使表格标签和div标签的高度行为相同?

我正在尝试实现一个具有页眉,中间和页脚区域的典型布局。 我特别要确保页脚永远不会高于可见屏幕的底部。 换种说法:当中间语​​言内容简短时,页脚应恰好在页面底部; 当“中部”内容较高时,“页脚”可以位于折叠以下,并且必须低于“中部”内容的底部。 另一个限制是,我正在使用大量现有的HTM
3回复

使表格大小与div相同

这对我来说很难。 简而言之:我的div重叠(在表格外)。 我想根据div调整表的大小。 当我尝试添加页脚时,内容会与之重叠。 这是代码: 这是页面: 页面
2回复

如何使div宽度适合div内的表格?

如果table在div内部并且表格的宽度不确定,这可能比屏幕宽度更宽,那么如何使包含该表格的div调整表格宽度? 由于div已经设置了padding: 10px ,当表超过屏幕宽度时, padding-right变为不可见。 这是代码:
1回复

使div宽度与其内容宽度相同[重复]

这个问题已经在这里有了答案: 如何使div不大于其内容? 38个答案 我已经在这个问题上附加了一个小提琴链接。 我需要红点更接近文本。 对于第一个和最后一个项目,它工作得很好..但是,如果任何项目是多行的..它在右边有多余的空格..我也希望点也更靠近第二个项目
1回复

使html表格单元格中的所有Divs与CSS中的最高div具有相同的高度

我有以下HTML代码: HTML: CSS: 每个单元格的宽度为800px 单元格中的每个项目将为200px 因此,该单元将具有3个项目,然后将其包装并具有另外3个项目 是否可以仅使用CSS使所有div项的高度等于最高的? 当前每个的高度由其中的文本确定
4回复

使div的宽度等于其包含的图像的宽度

另一个新手问题。 学习CSS。 我正在尝试做一些我认为非常简单的事情,但是还没有找到解决问题的方法或合适的答案。 我有一个带有页眉,一些内容和页脚的简单项目。 内容具有一个带有白色边框的div,并且其中包含一个图像。 我希望div与图像一样宽,而不要更宽。 我已经将宽度临时设置为
2回复

使div的宽度适应其包含多个div的内容

我有一个小问题。 实际上,我正在尝试使“内容”的宽度适应其中的多个div。 实际上,我正在尝试将此代码适应多个屏幕,无法指定特殊的宽度。 内联块根本不起作用。 我不知道为什么 我会将div内容居中在页面中间,并将类集中在div内容居中。 实际上是一个完美的中心。 有想法吗?
1回复

使DIV的宽度与内联阻塞的div相同?

我有以下示例: http : //jsfiddle.net/sSqxn/2/ 月份divs使用inline-block以便并排。 它们每个都可以有不同的宽度。 浏览器将自动水平滚动以适应其总宽度。 现在,蓝色div只是浏览器窗口的宽度。 是否有可能使蓝色div成为所有month
2回复

将HTML表格以90%宽度的Div居中

我有一个容器div设置为90%宽度。 我有一张要放在其中的桌子。 什么是实现此目的的最佳跨浏览器方式(包括IE6) 最好仅HTML和CSS。