使DIV填充整个表格单元格

我见过this questiongoogled a bit,但迄今为止没有任何效果 . 我用CSS来计算's 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell'的宽度和高度?

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

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

回答(19)

2 years ago

以下代码适用于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>

你在原来的问题中说过,将 widthheight 设置为 100% 不起作用,这让我怀疑还有其他一些规则会覆盖它 . 您是否检查了Chrome或Firebug中的计算样式,以查看是否真的应用了宽度/高度规则?

编辑

我多么愚蠢! div 正在调整文本大小,而不是 td . 您可以通过制作 div display:inline-block 在Chrome上解决这个问题,但它并不能证明这一点很棘手......

2 years ago

只有当表具有height属性本身时,表格单元格中的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>

UPD 在FireFox中,您还应该将 height=100% 值设置为父 TD 元素

2 years ago

我不得不 set a fake height to the <tr> and 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>

2 years ago

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

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

2 years ago

由于每个其他浏览器(包括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();
    }
});

2 years ago

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

<!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


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高度:100% . Esto lo hace兼容con FireFox和Chrome . Internet Explorer ignora eso,por lo que ponemos la etiqueta TD como block . De esta formaExplorersítomalaalturamáxima .

英文解释:代码注释内

2 years ago

我提出了一个解决方案,使用实验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>

2 years ago

好的没有人提到这个,所以我想我会发布这个伎俩:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

overflow:auto 在单元格内的容器div上为我做了诀窍 . 没有它,div不会使用整个高度 .

2 years ago

我认为最好的解决方案是使用JavaScript .

但是我不确定你是否需要这样做才能解决你在单元格外部 <td> 中定位元素的问题 . 为此你可以做这样的事情:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

当然不是内联,而是使用类和ID .

2 years ago

要使高度:100%适用于内部div,您必须为父td设置高度 . 对于我的特殊情况,它使用高度:100% . 这使得内部div高度伸展,而 table 的其他元素不允许td变得太大 . 你当然可以使用100%以外的其他值

如果你想让表格单元格具有固定的高度,以便它不会根据内容变大(使内部div滚动或隐藏溢出),那就是你别无选择,只能做一些js技巧 . 父td将需要以非相对单位(而不是%)指定高度 . 而你很可能别无选择,只能使用js计算高度 . 这还需要table-layout:为表元素设置的固定样式

2 years ago

我经常遇到类似的问题,总是只在 table 元素上使用 table-layout: fixed; ,在内部div上使用 height: 100%; .

2 years ago

除了使用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中测试 . 未使用嵌套表进行测试 .

2 years ago

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

2 years ago

我没有在这里看到< td >内的< div >的旧CSS技巧 . 因此我提醒:简单为 width 设置一些最小值,但 min-width 需要什么 . 例如:

<div style="width: 3px; min-width: 99%;">

在这种情况下, td 的宽度取决于你 .

2 years ago

我不确定你想做什么,但你可以尝试这个:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

2 years ago

以下应该有效 . 您必须为父单元格设置高度 . 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>

2 years ago

试试这个:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

2 years ago

尝试将display:table块放在单元格内

2 years ago

这是我在html中扩展100%高度和100%宽度的解决方案 <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%宽度,所以我发现这个 DOCTYPE 解决了这个问题

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

这个DOCTYPE让你将身体背景扩展为100%高度和100%宽度,让你将所有100%高度和100%宽度带入 <td>