表行display: block无法获得父表的100%宽度,当他们有display: table-row自然获得100%宽度但CSS值有一些其他副作用,我试图避免此刻.
是什么原因导致表行像这样,而不是像普通的块级元素？
LcS*_*zar 11
此行为与在浏览器上处理表的方式有关.
该table元素设置为display:table.的tr是display:table-row,和td是display:table-cell.如果您要创建基于div的css表,它的工作原理相同.
在这个小提琴上:http://jsfiddle.net/rv4v2964/1/,我创建了相同的基本示例,但是使用了div,并添加了一个block嵌套到表中的元素,但关闭了任何行或单元格.
您可以注意到它仅限于第一个单元格的宽度.本文陈述了一个原因:
...表和列宽度由table和col元素的宽度或第一行单元格的宽度设置...
这意味着当一个元素对表结构是奇数时,第一个单元格的宽度设置整个列的值.这实际上是table-layoutW3上指定的行为:
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
...第一行中的单元格与'width'属性的值不是'auto'确定该列的宽度...
另一篇文章提到了每个浏览器上关于如何从表结构中删除威胁元素的不同行为.http://snook.ca/archives/html_and_css/getting_your_di
结论
当你创建表时,浏览器不喜欢它,并且在它内部放置不应该存在的元素.这可能是我错误地渲染的.它将计算第一个单元格的宽度作为其参数.
在这种特定情况下,解决方法可能是将显示设置为display: table-caption;占据表的整个宽度.然后,将属性设置caption-side为bottom,它将保留在表的底部.
见这里:http://jsfiddle.net/rv4v2964/2/
参考:http://www.tagindex.net/css/table/caption_side.html
| 归档时间： |
|
| 查看次数： |
11441 次 |
| 最近记录： |