使DIV填充整个表格单元格
我已经看到这个问题，并search了一下 ，但迄今没有任何工作。 我想现在是2010年（这些问题/答案是旧的，好，没有回答），我们有CSS3！ 有没有办法让一个div填充整个表格单元的宽度和高度使用CSS？
我不知道单元格的宽度和/或高度会提前多久，并将div的宽度和高度设置为100％不起作用。
此外，我需要的div的原因是因为我需要绝对定位一些元素的单元格外， position: relative不适用于td s，所以我需要一个包装div。
以下代码适用于IE 8，IE 8的IE 7兼容模式和Chrome（未在别处testing）：
<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来解决这个问题，但是它在IE上不起作用。 这certificate技巧…
表格单元格中的div height = 100％将只在表格具有高度属性本身时才起作用。
<table border="1" style="height:300px; width: 100px;"> <tr><td>cell1</td><td>cell2</td></tr> <tr> <td> <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的UPD你也应该设置height=100%值父TD元素
如果你想要在表格单元格内的100％的div的原因是能够有一个背景颜色扩展到全高，但仍然可以有单元格之间的间距，你可以给自己的背景颜色和使用CSS border-spacing属性在单元格之间创build边距。
如果你确实需要100％高度的div，那么正如其他人在这里提到的，你需要给<table>指定一个固定的高度，或者使用Javascript。
我不得不为<td>s的<tr>和height：inherit设置一个假高度
tr有height: 1px （无论如何都被忽略）
然后设置td height: inherit
然后将div设置为height: 100%
这对我在IE边缘和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 7,8和9）都能正确处理表格单元格的position:relative ， 只有 Firefox出错，所以最好使用JavaScript填充。 你不应该改变一个失败的浏览器的DOM。 当IE发生错误，所有其他浏览器都正确使用时，人们总是使用垫片。
这里是所有代码注释的代码片段。 在我的例子中，JavaScript，HTML和CSS使用了响应式网页devise实践，但是如果你不想要的话，你并不需要。 （响应意味着它适应您的浏览器宽度。）
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(); } });
经过几天的search，我find了解决这个问题的可能方法。
<!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>
西class牙文：El truco es establecer la Tabla，el TR y el TD a height：100％。 Esto是兼容的FireFox y Chrome。 Internet Explorer中的无法使用，请参阅TD como块。 德州旅游资源pipe理公司。
英文解释：在代码注释中
我提出了一个使用实验性柔性盒来模拟表格布局并使内容元素填充其父单元格的解决scheme：
演示
.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>
我认为最好的解决scheme是使用JavaScript。
但是我不确定你需要这样做来解决你在单元<td>的<td>中定位元素的问题。 为此，你可以做这样的事情：
<div style="position:relative"> <table> <tr> <td> <div style="position:absolute;bottom:-100px">hello world</div> </td> </tr> </table> </div>
当然不是内联的，而是用类和ID。
为了使高度：100％的内部股利工作，你必须为父母的TD设置一个高度。 对于我的特殊情况，它使用高度：100％。 这使内部div高度拉伸，而桌子的其他元素不允许td变得太大。 你当然可以使用其他值，而不是100％
如果你还想让表格单元具有一个固定的高度，以便它不会根据内容变大（使内部div滚动或隐藏溢出），那就是当你别无select，只能做一些js技巧的时候。 父td将需要在非相对单位（不是％）中指定高度。 而你很可能别无select，只能用js来计算这个高度。 这也需要为table元素设置table-layout：fixed样式
我经常遇到类似的问题，总是使用table-layout: fixed; table上的元素和height: 100%; 在内部分区。
除了使用jQuery之外，我最终没有发现可以在所有浏览器和所有DocTypes /浏览器呈现模式下工作的东西。 所以这是我想出来的。
它甚至将rowspan考虑在内。
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);
testingIE11（边缘模式），FF42，Chrome44 +。 没有使用嵌套表进行testing。
好吧，没有人提到这个，所以我想我会发布这个技巧：
.tablecell { display:table-cell; } .tablecell div { width:100%; height:100%; overflow:auto; }
溢出：自动在该单元格内的容器div为我做的伎俩。 没有它的div不使用整个高度。
我不知道你想做什么，但你可以试试这个：
<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>
以下应该工作。 您必须将高度设置为父级单元格。 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>
尝试这个：
<td style="position:relative;"> <div style="position:absolute;top:0;bottom:0;width:100%;"></div> </td>
尝试将显示：表格块放在单元格内
这是我的解决scheme扩展100％的高度和100％的宽度在html <td>
如果你删除代码中的第一行，你可以修复它…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
因为这个doctype不允许在某些文件中使用<td>的100％百分比，但是如果删除这一行，则主体无法将背景扩展为100％高度和100％宽度，所以我find了解决这个DOCTYPE问题
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
这个DOCTYPE让你在100％身高和100％宽度的基础上延伸身体的背景，让你把所有的100％高度和100％的宽度放到<td>
