使 DIV 填充整个表格单元格
Posted
技术标签:
【中文标题】使 DIV 填充整个表格单元格【英文标题】：Make a DIV fill an entire table cell 【发布时间】：2011-03-14 00:48:48 【问题描述】：我见过this question 和googled a bit，但到目前为止没有任何效果。我想现在是 2010 年（那些问题/答案很老，而且，没有答案），我们有 CSS3！有没有办法让 div 使用 CSS 填充整个表格单元格的宽度和高度？
我不知道单元格的宽度和/或高度会提前是多少，将div的宽度和高度设置为100%是行不通的。
另外，我需要 div 的原因是因为我需要将一些元素绝对定位在单元格之外，而position: relative 不适用于tds，所以我需要一个包装 div。
【问题讨论】：
桌子的容器本身有特定的高度吗？表格是否跨越页面的视口？ 将高度和宽度设置为 100% 不起作用真的很奇怪。这应该使 div 成为父标签的全宽和全高。由于相对定位，这可能不起作用。当有人找到解决方案时，我很想知道解决方案。 @meder 表中的数据是动态的，所以我永远不会知道高度。宽度填满屏幕，是的。 你可能想看看这个问题：***.com/questions/2841484/… @Marcin 如果表格单元格（即容器）的高度没有明确说明，则内部 DIV 上的 pc% 高度实际上计算为“自动” - 根据规范。 【参考方案1】：表格单元格中的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>UPD 在 FireFox 中，您还应该将 height=100% 值设置为父 TD 元素
【讨论】：
好技巧，但对我来说只在 Chromium 上工作。 IE9 & firefox 19 无法拉伸 div。 我没有使用像素高度，而是使用 100% 高度和最小高度：1px。 如果将包含的td 高度也设置为100%，它应该可以在FF 中使用。这是正确的答案。
被否决，不起作用。小提琴：jsfiddle.net/Darker/da8aL2hk 截图：i.stack.imgur.com/CwLnK.png
您还需要为 <tr> 添加 100% 的高度。【参考方案2】：
我必须将 fake 高度设置为 <tr> 和 height: inherit for <td>s
tr 有 height: 1px（无论如何都会被忽略）
然后设置td height: inherit
然后将 div 设置为 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>【讨论】：
我不知道这是否总是有效，但它在 IE 11 中对我有用。 Chrome 只需要td height: 1px 。
这不适用于 Firefox，您必须在 th/td 单元格上设置 height: 100% 而不是 inherit。但是它不会在 chrome/safari 等中工作。:-)。我使用@supports (height: -mo-available) 来实际定位firefox 并在查询中设置高度。【参考方案3】：
以下代码适用于 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。您可以在 Chrome 上通过设置 div display:inline-block 来解决此问题，但它不适用于 IE。事实证明这更棘手......
【讨论】：
sigh... 好呼吁检查是否正在应用其他样式。显然我有一些填充规则阻止我的 div 跨越整个表格单元格。一旦我摆脱了这些，我就没有问题了。我很好奇，因为我的代码看起来和你的一样（当然是使用类），但是当我走得更远时，你瞧，填充。感谢您的帮助。 试试这个例子：jsfiddle.net/2K2tG 注意带有图像的单元格是红色的而不是#abc。宽度/高度 100% 什么都不做 是的，这适用于 Chrome，但不幸的是不适用于 Firefox...jsfiddle.net/38Ngn/1【参考方案4】：所以，因为每个人都在发布他们的解决方案，但没有一个对我有好处，所以这是我的（在 Chrome 和 Firefox 上测试）。
table height: 1px; /* Will be ignored, don't worry. */
tr height: 100%;
td height: 100%;
td > div height: 100%;
小提琴：https://jsfiddle.net/nh6g5fzv/
--
编辑：您可能需要注意一件事，如果您想对 td 中的 div 应用填充，则必须添加 box-sizing: border-box;，因为 height: 100%。
【讨论】：
在我的情况下工作了一段时间，直到最近 Chrome 才开始实际将桌子的高度降低到 1px，实际上使它无法使用。不完全确定这里发生了什么，使用时要小心 我正在 Chromium 87 上进行测试，它仍在工作，你确定你的桌子上还有display: table; 吗？或者也许我们需要试用 Chrome 的开发版本？
这适用于 Firefox、Chrome、Safari 和 Edge。谢谢【参考方案5】：
如果您希望在表格单元格中使用 100% div 的原因是能够将背景颜色扩展到全高，但仍然能够在单元格之间留出间距，您可以将 <td> 本身指定为背景颜色并使用 CSS 边框间距属性来创建单元格之间的边距。
但是，如果您确实需要 100% 高度的 div，那么正如其他人在这里提到的，您需要为 <table> 分配固定高度或使用 javascript。
【讨论】：
您可以通过在“table”ed 元素上使用border-spacing:5px 来分隔单元格，但我同意，在单元格内使用 DIV 会更优雅，总体而言更好。
感谢您的建议，工作正常。只要记住将border-collapse: separate 应用到表中，否则不会有任何效果。 +1
border-collapse: separate 是默认值，但是是的，这是一个很好的提示。【参考方案6】：
由于其他所有浏览器（包括 IE 7、8 和 9）都能正确处理表格单元格上的position:relative，而只有 Firefox 会出错，因此最好的办法是使用 JavaScript shim。你不应该为一个失败的浏览器改变你的 DOM。当 IE 出现问题而所有其他浏览器都正确时，人们总是使用 shim。
这是一个带有所有代码注释的 sn-p。在我的示例中，JavaScript、html 和 CSS 使用响应式网页设计实践，但如果您不想要，则不必这样做。 （响应式意味着它适应您的浏览器宽度。）
http://jsfiddle.net/mrbinky3000/MfWuV/33/
这里是代码本身，但是没有上下文就没有意义，所以访问上面的 jsfiddle URL。 （完整的 sn-p 在 CSS 和 Javascript 中也有大量的 cmets。）
$(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();
);
【讨论】：
虽然这是一个很好的答案，但不要复制/粘贴此代码。 $.browser 自 jQuery 1.8 起已被弃用，并在 1.9 中被删除。欲了解更多信息：api.jquery.com/jQuery.browser 我也喜欢这个答案，但就像@cmegown 说的那样， $.browser 现在已被弃用。我个人会做的（我会尝试 - 我不是 100% 确定它会起作用）是将元素的位置从静态更改为绝对（或相反），看看是否有与窗口相比，元素位置的变化。这应该仅在元素具有top:0; left: 0; 时才有效。
我可以确认这对我有用 - 我得到元素的 .offset() 然后将其更改为绝对位置并再次获取它的 offset() 如果它不一样，我把它包起来在一个位置：相对 div。这只有效，因为当绝对定位时，我不希望我的元素改变它的定位（因为它是顶部：0；左侧：0；）
Firefox 不会“弄错”。 CSS 规范中未定义相对定位表格单元格。 (link)【参考方案7】：
如果<table> <tr> <td> <div>都设置了height: 100%;，那么div将填充所有浏览器中的动态单元格高度。
【讨论】：
【参考方案8】：经过几天的搜索，我找到了解决此问题的可能方法。
<!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 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>
西班牙语： El truco es establecer la Tabla, el TR y el TD a height:100%。 Esto lo hace 兼容 con FireFox y Chrome。 Internet Explorer ignora eso，por lo que ponemos la etiqueta TD como 块。 De esta forma Explorer sí toma la altura máxima。
英文解释：代码注释内
【讨论】：
【参考方案9】：我提出了一个解决方案，使用 experimental 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>【讨论】：
【参考方案10】：因为我没有足够的声誉来发表评论，所以我想添加一个完整的跨浏览器解决方案，它结合了@Madeorsk 和@Saadat 的方法并稍作修改！ （截至 2020 年 2 月 10 日在 Chrome、Firefox、Safari、IE 和 Edge 上测试）
table height: 1px;
tr height: 100%;
td height: 100%;
td > div
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100%);
width: 100%;
background: pink; // This will show that it works!
但是，如果您像我一样，也想控制垂直对齐，在这种情况下，我喜欢使用 flexbox：
td > div
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
【讨论】：
【参考方案11】：好的，没有人提到这个，所以我想我会发布这个技巧：
.tablecell
display:table-cell;
.tablecell div
width:100%;
height:100%;
overflow:auto;
overflow:auto 在单元格内的该容器 div 上为我解决了问题。没有它，div 不会使用整个高度。
【讨论】：
【参考方案12】：要使 height:100% 对内部 div 起作用，您必须为父 td 设置一个高度。对于我的特殊情况，它使用高度：100％。这使得内部 div 高度拉伸，而表格的其他元素不允许 td 变得太大。您当然可以使用 100% 以外的其他值
如果你还想让表格单元格有一个固定的高度，这样它就不会根据内容变大（让内部div滚动或隐藏溢出），那就是你别无选择，只能做一些js技巧.父 td 需要以非相对单位（不是 %）指定高度。而且您很可能别无选择，只能使用 js 计算该高度。这也需要 table-layout:fixed 为表格元素设置样式
【讨论】：
【参考方案13】：我经常遇到类似的问题，总是只在table元素上使用table-layout: fixed;，在内部div上使用height: 100%;。
【讨论】：
【参考方案14】：我最终发现除了使用 jQuery 之外，没有任何东西可以在我的所有浏览器和所有 DocTypes / 浏览器呈现模式上运行。所以这就是我想出的。 它甚至考虑了行跨度。
function InitDivHeights()
var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
var rows = $('#MyTable tr');
var heights = [];
for (var i = 0; i < rows.length; i++)
heights[i] = $(rows[i]).height();
for (var i = 0; i < rows.length; i++)
var row = $(rows[i]);
var cells = $('td', row);
for (var j = 0; j < cells.length; j++)
var cell = $(cells[j]);
var rowspan = cell.attr('rowspan') || 1;
var newHeight = 0;
for (var k = 0; (k < rowspan && i + k < heights.length); k++)
newHeight += heights[i + k];
$('div', cell).height(newHeight - spacing);
$(document).ready(InitDivHeights);
在 IE11（边缘模式）、FF42、Chrome44+ 中测试。未使用嵌套表进行测试。
【讨论】：
好吧，现在这很容易使用 flexbox。这是一个老问题！ @Jason 谢谢，但我们也需要它在 IE10/IE11 中工作，根据caniuse.com/#feat=flexbox 和github.com/philipwalton/flexbugs，它们都具有部分/错误的 flexbox 支持。也许以后...【参考方案15】：如果表格单元格是您想要的大小，只需添加此 css 类并将其分配给您的 div：
.block
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100vh);
width: 100%;
如果您希望表格单元格也填满父单元格，请将类也分配给表格单元格。 希望对你有帮助。
【讨论】：
【参考方案16】：你可以这样做：
<td>
<div style="width: 100%; position: relative; float: left;">inner div</div>
</td>
【讨论】：
【参考方案17】：聚会有点晚了，但这是我的解决方案：
<td style="padding: 0; position: relative;">
<div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
</div>
</td>
【讨论】：
【参考方案18】：如果定位元素及其父元素没有宽高，则设置
padding: 0;
在其父元素中，
【讨论】：
【参考方案19】：这可能不推荐。
如果您的 div 不包含文本并且具有统一的背景，我想出了一个解决方法。
display: 'list-item'
为 div 提供所需的高度和宽度，但有一个列表项项目符号的大缺点。由于 div 具有同质的背景颜色，我用这些样式摆脱了子弹：
list-style-position: 'inside',
color: *background-color*,
【讨论】：
【参考方案20】：我不确定你想做什么，但你可以试试这个：
<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>
【讨论】：
【参考方案21】：以下应该有效。您必须为父单元格设置高度。 https://jsfiddle.net/nrvd3vgd/
<table style="width:200px; border: 1px solid #000;">
<tr>
<td style="height:100px;"></td>
</tr>
<tr>
<td style="height:200px;">
<div style="height:100%; background: #f00;"></div>
</td>
</tr>
</table>
【讨论】：
【参考方案22】：试试这个：
<td style="position:relative;">
<div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>
【讨论】：
【参考方案23】：我认为最好的解决方案是使用 JavaScript。
但我不确定您是否需要这样做来解决在单元格外部的<td> 中定位元素的问题。为此，您可以执行以下操作：
<div style="position:relative">
<table>
<tr>
<td>
<div style="position:absolute;bottom:-100px">hello world</div>
</td>
</tr>
</table>
</div>
当然不是内联，而是带有类和 ID。
【讨论】：
感谢您的回复。如果我需要相对于 table 放置一些东西，这很有效。我需要在一个单独的 cell 之外放置一些东西，该单元的位置是未知的。 您能详细说明此表包含的内容吗？什么是 100% 宽度/高度？【参考方案24】：我没有看到 td> 中的 div> 的旧 CSS 技巧。因此我提醒：简单地为 width 设置一些最小值，但 what-you-need 为 min-width。例如：
<div style="width: 3px; min-width: 99%;">
在这种情况下，td 的宽度由您决定。
【讨论】：
【参考方案25】：这是我在 html <td> 中扩展 100% 高度和 100% 宽度的解决方案
如果您删除代码中的第一行，您可以修复它...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
因为这个 doctype 不允许在某些文件中使用 <td> 内部的 100%，但是如果你删除这一行，body 将无法将背景扩展到 100% 高度和 100% 宽度，所以我发现了这个DOCTYPE 解决问题
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
这个 DOCTYPE 可以让你将身体中的背景扩展为 100% 高度和 100% 宽度，并让你将所有 100% 高度和 100% 宽度放入<td>
【讨论】：
最好不要弄乱文档类型。你似乎没有意识到所有的后果。更改 Doctype 可能会产生很多副作用（CSS 世界中的大多数事情也是如此，可悲的是）。以上是关于使 DIV 填充整个表格单元格的主要内容，如果未能解决你的问题，请参考以下文章