使DIV填充整个表格单元格

Question

我已经看过这个问题并且用Google搜索了一下,但到目前为止还没有任何效果.我现在认为它是2010年(那些问题/答案很老,而且很好,没有答案)我们有CSS3!有没有办法让一个div使用CSS填充整个表格单元格的宽度和高度？

我不知道单元格的宽度和/或高度是提前的,并且将div的宽度和高度设置为100%不起作用.

另外,我需要div的原因是因为我需要绝对将一些元素放在单元格之外,并且position: relative不适用于tds,所以我需要一个包装div.

Answer 1

表格单元格中的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元素设置值

Answer 2

以下代码适用于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上无法解决此问题.这证明比较棘手......

Answer 3

我必须设置一个假高度<tr>和高度:继承<td>s

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>

Answer 4

由于这个地方的大多数解决方案都是不正确的，因此最上面的答案甚至没有解决问题，并且所选的答案不起作用。

要以尽可能短的方式解决问题，请将table高度设置为高度fit-content 即可完成。table-row100%

适用于 Firefox、Chrome 和 Edge。

例子：

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

Answer 5

如果你想要一个表格单元格中100%div的原因是能够将背景颜色延伸到整个高度但仍然能够在单元格之间有间距,那么你可以给<td>自己提供背景颜色并使用CSS border-spacing属性用于创建单元格之间的边距.

但是,如果你真的需要一个100%高度的div,那么就像其他人提到的那样,你需要为它分配一个固定的高度<table>或使用Javascript.

Answer 6

由于每个其他浏览器(包括IE 7,8和9)position:relative正确处理表格单元格,只有 Firefox出错,最好的办法是使用JavaScript填充程序.您不必为一个失败的浏览器更改DOM.当IE出错并且所有其他浏览器都正确时,人们总是使用填充程序.

这是一个包含所有代码注释的片段.JavaScript,HTML和CSS在我的示例中使用了响应式Web设计实践,但如果您不想要,则不必使用.(响应意味着它适应您的浏览器宽度.)

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();
    }
});

Answer 7

如果<table> <tr> <td> <div>都已height: 100%;设置，则 div 将填充所有浏览器中的动态单元格高度。

Answer 8

因此，由于每个人都在发布他们的解决方案，但对我来说都不是一件好事，因此这是我的（在Chrome和Firefox上进行了测试）。

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

小提琴：https：//jsfiddle.net/nh6g5fzv/