使一个DIV填满整个表格单元格

Question

使一个DIV填满整个表格单元格

css

216

我看到了这个问题并且查询过一些资料，但至今没有找到解决方法。我想现在已经是2010年了（那些问题/答案都太老了，而且还没有回答），我们有CSS3！是否有任何方法可以使用CSS使一个div充满整个表格单元格的宽度和高度？

我不知道单元格的宽度和/或高度将会是多少，将div的宽度和高度设置为100%无效。

另外，我需要这个div是因为我需要绝对定位一些元素在单元格外部，而position:relative不适用于td，所以我需要一个包装器div。

- Jason

6

将高度和宽度设置为100%却不起作用，这真的很奇怪。这应该使div标签与父标签具有相同的宽度和高度。也许这不起作用是因为相对定位。当有人找到解决方案时，我很想看看它是什么。 - Marcin

@meder 表格中的数据是动态的，所以我永远不会知道高度。宽度填满屏幕，是的。 - Jason

1

你可能想看一下这个问题：https://dev59.com/zXE85IYBdhLWcg3wUBoZ#3074320 - Gert Grenander

3

如果表格单元格（即容器）的高度没有明确声明，那么内部DIV元素上的百分比高度pc%实际上会根据规范计算为“auto”。请注意，这里指的是CSS规范。 - MrWhite

除非您可以使表格跨越视口，否则您可能需要依赖JS。 - meder omuraliev

显示剩余3条评论

27个回答

91

当且仅当table元素本身具有height属性时，在表格单元格中使用div height=100%才有效。

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td style="height: 100%">
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

更新：在FireFox中，您还应该将height=100%值设置为父级TD元素。

- dma

不错的技巧，但只在Chromium上有效。IE9和Firefox 19无法拉伸div。 - Martin Pernollet

1

我使用了100%的高度和min-height:1px，而不是使用像素高度。 - andrea.spot.

1

如果您将包含的 td 高度也设置为 100％，则在 FF 中应该可以正常工作。这是正确的答案。 - HartleySan

被踩了，不起作用。Fiddle链接：https://jsfiddle.net/Darker/da8aL2hk/ 截图：http://i.stack.imgur.com/CwLnK.png - Tomáš Zato

你还需要给<tr>元素添加100%的高度。 - GreyRoofPigeon

Kaperstone的答案更简单，而且非常有效。 - MYZ

66

所以，因为每个人都在发布他们的解决方案，而且没有一个适合我，这里是我的解决方案（已在Chrome和Firefox上测试）。

table { height: 1px; } /* Will be ignored, don't worry. */
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Fiddle: https://jsfiddle.net/nh6g5fzv/

--

编辑：如果您想要在td中的div上应用padding，您必须添加box-sizing: border-box;，因为有height: 100%。

- Madeorsk

在我的情况下，这个方法一直很好用，直到最近Chrome开始将表格的高度实际削减到1像素，从而使其无法使用。我不太确定发生了什么事，所以在使用时要小心。 - phil294

我正在 Chromium 87 上进行测试，它仍然可以工作，你确定你的表格仍然有 display: table; 吗？或者我们需要在 Chrome 的开发版本上尝试一下？ - Madeorsk

1

这在Firefox、Chrome、Safari和Edge中对我有效。谢谢。 - Mike

1

这是完整而正确的解决方案！谢谢，伙计！:) - undefined

48

以下代码可在IE 8、IE 8的IE 7兼容模式和Chrome上运行（其他地方未经测试）：

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

根据你在原问题中的描述，将width和height设置为100％没有起作用，这表明可能存在其他规则覆盖了它。你是否在Chrome或Firebug中检查计算后样式以查看宽度/高度规则是否真正生效了？

编辑

我是多么愚蠢啊！div的大小是根据文本而不是td来确定的。你可以通过将div设置为display:inline-block来在Chrome上修复它，但在IE上不起作用。这证明更加棘手...

- Ian Henry

叹气...检查是否应用了其他样式是个好主意。显然，我有一些填充规则阻止了我的div跨越整个表格单元格。一旦我摆脱了这些规则，我就没有问题了。我很好奇，因为我的代码看起来和你的一样（当然使用类），但当我向上追溯时，哎呀，填充。感谢您的帮助。 - Jason

6

请尝试这个例子：http://jsfiddle.net/2K2tG/ 注意观察带有图像的单元格是红色而不是#abc。设置宽度/高度为100%是无效的。 - Jason

5

是的，这个在Chrome中可以工作，但不幸的是在Firefox中不行... http://jsfiddle.net/38Ngn/1/ - Pluto

22

由于此处大多数解决方案都是错误的，顶部答案甚至没有解决问题，而选择的答案也不起作用。

为了以最短的方式解决问题，请将table高度设置为fit-content，将table-row高度设置为100％，然后您就完成了。

适用于Firefox，Chrome和Edge。

示例：

<table style="height:fit-content">
    <tr style="height:100%">
        <td>
            <div style="height:100%"></div>
        </td>
    </tr>
</table>

- Kaperstone

1

运行得非常好！对我来说，只需将 height:fit-content 应用于 <table>，无需对 <tr> 应用任何样式即可正常工作。 - Jay Dadhania

这应该是被接受的答案。必须在th上添加height:100%才能在FireFox中工作。 - henk

这个答案是唯一正确的。 - Sysout

这是正确的方式！ - MYZ

1

截至2023年1月，FF浏览器不支持height:fit-content。可以在caniuse.com/?search=fit%20content了解更多信息。但是将<tr>的高度设置为100%对我很有用！感谢！ - cyclingLinguist

FF现在支持它了。 - yolenoyer

15

如果您想让表格单元格内的100% div具有完整的背景颜色并仍能在单元格之间保留间距，您可以将背景颜色应用于 <td> 元素，并使用 CSS 的 border-spacing 属性来创建单元格之间的外边距。

但是，如果您确实需要一个具有 100% 高度的 div，那么如其他人在这里提到的，您需要给 <table> 分配一个固定高度或使用 Javascript。

- Matt Browne

1

你可以在“table”元素上使用border-spacing:5px来设置单元格之间的间距，但我同意，在单元格内部使用DIV更加优雅和更好。 - vsync

谢谢建议，非常好用。只需记得将 border-collapse: separate 应用于表格，否则它将没有任何效果。+1 - katzenhut

border-collapse: separate 是默认值，但是没错，这是一个好的提示。 - Matt Browne

8

如果设置了<table> <tr> <td> <div>的height: 100%;，那么这个

元素将填充所有浏览器中动态单元格的高度。

- Edward Newsome

2

为什么这个能够工作？ - V. Rubinetti

6

由于其他浏览器（包括IE 7、8和9）正确处理表格单元格上的position:relative而仅有Firefox出错，所以您最好使用JavaScript shim。您不应该为一个失败的浏览器改变DOM。当IE出现问题而所有其他浏览器都没有问题时，人们经常使用shim。

这里是带有注释的所有代码片段。我的示例中使用了响应式Web设计实践的JavaScript、HTML和CSS，但如果您不想使用，则不必使用。（响应式意味着它会自适应您的浏览器宽度。）

http://jsfiddle.net/mrbinky3000/MfWuV/33/

这里是代码本身，但如果没有上下文，它就没有意义，请访问上面的jsfiddle URL。（完整片段还有大量的CSS和Javascript注释。）

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

- mrbinky3000

2

虽然这是一个好答案，但不要复制/粘贴此代码。自jQuery 1.8以来，$.browser已被弃用，并在1.9中被删除。更多信息请参见：http://api.jquery.com/jQuery.browser/ - cmegown

我也喜欢这个答案，但像@cmegown所说，$.browser现在已经被弃用了。我个人会尝试将元素的定位从静态改为绝对（或者反过来），看看元素相对于窗口位置是否有变化（我会尝试一下，但不确定它是否有效）。这只有在元素具有“top:0; left: 0;”时才有效。 - Nikola Ivanov Nikolov

我可以确认这对我有效 - 我获取元素的 .offset()，然后将其更改为 position absolute 并再次获取其 offset()，如果不同，我就用一个 position: relative 的 div 包装它。这仅适用于当我将元素绝对定位时，我不希望它的定位发生变化（因为它的 top: 0; left: 0;）。 - Nikola Ivanov Nikolov

7

火狐浏览器并没有“搞错”。在CSS规范中，相对定位表单单元格是未定义的。 (链接) - user2867288

3

经过几天的搜索，我找到了这个问题可能的解决方法。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

西班牙语翻译为中文：关键是将表格、TR和TD设置为高度100％。这样可以使其与Firefox和Chrome兼容。Internet Explorer会忽略它，因此我们将TD标记设置为块。这样，Explorer可以使用最大高度。

第二个段落似乎是说明代码注释的含义。

- Jata

3

我提出了一种解决方案，使用Flexbox（实验性的）来模拟表格布局，这将允许单元格的内容元素在垂直方向上填充其父单元格：

示例

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

- vsync

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WheretheresaWill · Accepted Answer

我必须为 <tr> 设置一个虚假的高度，而为 <td> 设置 height: inherit

<tr> 有 height: 1px（无论如何它都会被忽略）

然后将 <td> 的高度设置为 height: inherit

然后将该

的高度设置为 height: 100%

这对我在IE Edge和Chrome中有效：

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>