我见过this question和googled 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 回答
如果
<table> <tr> <td> <div>
都设置了height: 100%;
,则div将填充所有浏览器中的动态单元格高度 .我没有在这里看到< td >内的< div >的旧CSS技巧 . 因此我提醒:简单为 width 设置一些最小值,但 min-width 需要什么 . 例如:
在这种情况下, td 的宽度取决于你 .
我不确定你想做什么,但你可以尝试这个:
<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>
以下应该有效 . 您必须为父单元格设置高度 . https://jsfiddle.net/nrvd3vgd/
试试这个:
尝试将display:table块放在单元格内
以下代码适用于IE 8,IE 8的IE 7兼容模式和Chrome(未在别处测试):
你在原来的问题中说过,将
width
和height
设置为100%
不起作用,这让我怀疑还有其他一些规则会覆盖它 . 您是否检查了Chrome或Firebug中的计算样式,以查看是否真的应用了宽度/高度规则?编辑
我多么愚蠢!
div
正在调整文本大小,而不是td
. 您可以通过制作div
display:inline-block
在Chrome上解决这个问题,但它并不能证明这一点很棘手......只有当表具有height属性本身时,表格单元格中的div height = 100%才有效 .
UPD 在FireFox中,您还应该将
height=100%
值设置为父TD
元素我不得不 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中对我有用:
如果你想要一个表格单元格中100%div的原因是能够将背景颜色延伸到整个高度但仍然能够在单元格之间有间距,那么你可以给
<td>
本身提供背景颜色并使用CSS border-spacing属性用于创建单元格之间的边距 .但是,如果你确实需要一个100%高度的div,那么就像其他人提到的那样,你需要为
<table>
分配一个固定的高度或者使用Javascript .由于每个其他浏览器(包括IE 7,8和9)正确处理表格单元格上的
position:relative
并且只有Firefox出错,最好的办法是使用JavaScript填充程序 . 您不必为一个失败的浏览器更改DOM . 当IE出错并且所有其他浏览器都能正确使用时,人们会一直使用填充程序 .这是一个包含所有代码注释的片段 . JavaScript,HTML和CSS在我的示例中使用响应式Web设计实践,但如果您不想要,则不必使用 . (响应意味着它适应您的浏览器宽度 . )
http://jsfiddle.net/mrbinky3000/MfWuV/33/
这是代码本身,但没有上下文就没有意义,所以请访问上面的jsfiddle URL . (完整的代码片段在CSS和Javascript中也有很多注释 . )
经过几天的搜索,我找到了解决这个问题的可能方法 .
西班牙语: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 .
英文解释:代码注释内
我提出了一个解决方案,使用实验Flexbox来模拟表格布局,这将允许单元格的内容元素垂直填充其父单元格:
演示
好的没有人提到这个,所以我想我会发布这个伎俩:
overflow:auto 在单元格内的容器div上为我做了诀窍 . 没有它,div不会使用整个高度 .
我认为最好的解决方案是使用JavaScript .
但是我不确定你是否需要这样做才能解决你在单元格外部
<td>
中定位元素的问题 . 为此你可以做这样的事情:当然不是内联,而是使用类和ID .
要使高度:100%适用于内部div,您必须为父td设置高度 . 对于我的特殊情况,它使用高度:100% . 这使得内部div高度伸展,而 table 的其他元素不允许td变得太大 . 你当然可以使用100%以外的其他值
如果你想让表格单元格具有固定的高度,以便它不会根据内容变大(使内部div滚动或隐藏溢出),那就是你别无选择,只能做一些js技巧 . 父td将需要以非相对单位(而不是%)指定高度 . 而你很可能别无选择,只能使用js计算高度 . 这还需要table-layout:为表元素设置的固定样式
我经常遇到类似的问题,总是只在
table
元素上使用table-layout: fixed;
,在内部div上使用height: 100%;
.除了使用jQuery之外,我最终发现在我的所有浏览器和所有DocTypes /浏览器渲染模式中都没有任何效果 . 所以这就是我想出来的 .
它甚至需要进行排队帐户 .
在IE11(边缘模式),FF42,Chrome44中测试 . 未使用嵌套表进行测试 .
这是我在html中扩展100%高度和100%宽度的解决方案
<td>
如果删除代码中的第一行,则可以修复它...
因为这个doctype不允许在某些文件中使用
<td>
内部的100%百分比,但是如果你删除这一行,则主体无法将背景扩展到100%高度和100%宽度,所以我发现这个DOCTYPE
解决了这个问题这个DOCTYPE让你将身体背景扩展为100%高度和100%宽度,让你将所有100%高度和100%宽度带入
<td>