代码之家 › 专栏 › 技术社区 › Jason

使DIV填充整个表单元格

css

131

Jason · 技术社区 · 14 年前

this question 和 googled a bit ,但到目前为止还没有任何效果。我想现在是2010年(那些问题/答案都是老问题,好吧,没有答案),我们有CSS3!有没有办法让div使用CSS填充整个表格单元格的宽度和高度?

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

另外,我之所以需要div是因为我需要绝对地将一些元素放置在单元格之外,并且 position: relative 不适用于 td

22 回复 | 直到 7 年前

Krease 11 年前

以下代码适用于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中的computed样式,看看是否真的应用了宽度/高度规则?

我真傻!这个 div td . 你可以通过制作 display:inline-block ,但它对IE不起作用。那就更棘手了。。。

Flimm D. Ben Knoble 4 年前

只有当表格本身具有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>

升级版 height=100% TD 要素

Dai 4 年前

设置 伪造的 到地面的高度 <tr> 和高度:继承 <td>s

tr有 height: 1px (不管怎样都忽略了)

然后设置td height: inherit

然后将div设置为 height: 100%

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

Madeorsk 4 年前

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%

Matt Browne 12 年前

如果您希望在表格单元格中使用100%div的原因是能够将背景色扩展到整个高度,但仍然能够在单元格之间留有间距,则可以给出 <td> 它自己设置背景色,并使用CSS border spacing属性在单元格之间创建边距。

<table> 或者使用Javascript。

mrbinky3000 10 年前

position:relative 在表格单元格上 Firefox搞错了,最好的办法就是使用JavaScript填充程序。你不应该为一个失败的浏览器改变你的DOM。当IE出错而其他浏览器都正确时,人们总是使用填隙片。

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

这里是代码本身,但是没有上下文就没有意义,所以请访问上面的jsfiddleurl(完整的代码段在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();
    }
});

Edward Newsome 6 年前

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

vsync 7 年前

我建议使用 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>

Jata 11 年前

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

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

西班牙语: 停战状态表height:100%. 与FireFox和Chrome兼容。Internet Explorer ignora eso,por lo que ponemos la etiqueta TD como块。形式探险家s toma la altura mxima。

英文说明:代码注释内

booellean 5 年前

因为我没有足够的声誉发表评论,所以我想添加一个完整的跨浏览器解决方案,将@Madeorsk和@Saadat的方法结合起来,稍加修改(在Chrome、Firefox、Safari、IE和Edge上测试(截至2020年2月10日)

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

FlorianB 8 年前

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

在牢房里的那个集装箱舱里,这对我很有帮助。没有它,div就不能使用整个高度。

Saadat 6 年前

如果表格单元格是您想要的大小,只需添加此css类并将其分配给您的div:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Desolator 5 年前

派对有点晚了,但我的解决办法是:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Radu Simionescu 11 年前

使height:100% 对于内部div,必须为父td设置一个高度。在我的特殊情况下,它使用height:100%. 这使得内部div高度拉伸,而表的其他元素不允许td变得太大。当然可以使用100%以外的其他值

如果您还想使表格单元格具有固定的高度,以便它不会因内容而变大(以使内部div滚动或隐藏溢出),则此时您别无选择,只能执行一些js技巧。父td需要以非相对单位(不是%)指定高度。你可能别无选择,只能用js来计算这个高度。这也需要桌子-layout:fixed style 为表元素设置

Kidd Cudi 10 年前

table-layout: fixed; table height: 100%; 在内部分区上。

Peter B 9 年前

它甚至考虑了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);

Muho 6 年前

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

niffler 5 年前

padding: 0;

user1911283 5 年前

可能不建议这样做。

我想出了一个解决方法,如果你的div不包含文本,并且有一个统一的背景,那么它就可以工作。

display: 'list-item'

为div提供所需的高度和宽度,但具有列表项项目符号的大缺点。因为div有一个均匀的背景色,所以我去掉了那些样式的项目符号:

list-style-position: 'inside',
color: *background-color*,

-1

Michael Sparks 14 年前

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

<td> 在牢房外面。为此你可以这样做:

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

当然不是内联的,而是类和id。

-1

Jeffrey 10 年前

我不知道你想做什么,但你可以试试这个:

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

-1

Jason 9 年前

下面的方法应该有效。必须设置父单元格的高度。 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>

-1

JayB 8 年前

试试这个:

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

-2

sneakyfildy 8 年前

试着把display:table block 在牢房里

-2

Leon Rom 6 年前

部门 &燃气轮机;内部< >。因此我提醒:简单的设置一些最小值宽度 ,但是对于 最小宽度 . 例如:

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

这个 td公司 的宽度,在这种情况下,是由你决定的。

-9

akjoshi HCP 12 年前

这是我在html中扩展100%高度和100%宽度的解决方案 <td>

如果删除代码中的第一行,可以修复它。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<td> ,但是如果删除这行,主体将无法将背景扩展到100%高度和100%宽度,所以我找到了这个 DOCTYPE

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

这个DOCTYPE允许你将身体的背景扩展为100%的高度和100%的宽度,并允许你将所有的100%高度和100%的宽度都添加到背景中 <td>