html – 为什么不显示：块和100％宽度工作表行？

概述具有display：block的表行无法获得父表的100％宽度,当它们显示时：table-row它们自然得到100％宽度,但CSS值有一些其他副作用,我试图避免此刻. Plunker that demonstrate the problem. 是什么原因导致表行像这样,而不是像普通的块级元素？ 此行为与在浏览器上处理表的方式有关. table元素设置为display：table. tr是displ 具有display：block的表行无法获得父表的100％宽度,当它们显示时：table-row它们自然得到100％宽度,但CSS值有一些其他副作用,我试图避免此刻.

Plunker that demonstrate the problem.

是什么原因导致表行像这样,而不是像普通的块级元素？

解决方法 此行为与在浏览器上处理表的方式有关.

table元素设置为display：table. tr是display：table-row,td是display：table-cell.如果您要创建基于div的CSS表,它的工作原理相同.

在这个小提琴：http://jsfiddle.net/rv4v2964/1/,我创建了相同的基本示例,但是使用了div,并添加了嵌套到表中的块元素,但是关闭了任何行或单元格.

您可以注意到它仅限于第一个单元格的宽度.一个原因在this article中说明：

@H_301_27@

…the table and column wIDths are set by the wIDths of table and col elements or by the wIDth of the first row of cells…

这意味着当一个元素对表结构是奇数时,第一个单元格的宽度设置整个列的值.这实际上是在W3上指定的表格布局行为：

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

@H_301_27@

…a cell in the first row with a value other than ‘auto’ for the ‘wIDth’ property determines the wIDth for that column…

另一篇文章提到了每个浏览器上关于如何从表结构中删除威胁元素的不同行为. http://snook.ca/archives/html_and_css/getting_your_di

结论

当你创建表时,浏览器不喜欢它,并且在它内部放置不应该存在的元素.这可能是我错误地渲染的.它将计算第一个单元格的宽度作为其参数.

在这种特定情况下,解决方法可能是将显示设置为display：table-caption;占用表格的整个宽度.然后,将属性标题侧设置为底部,它将保留在表的底部.

见：http://jsfiddle.net/rv4v2964/2/

参考：http://www.tagindex.net/css/table/caption_side.html

总结

以上是内存溢出为你收集整理的html – 为什么不显示：块和100％宽度工作表行？全部内容，希望文章能够帮你解决html – 为什么不显示：块和100％宽度工作表行？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。