tr 元素周围的边框不显示?
Posted
技术标签:
【中文标题】tr 元素周围的边框不显示?【英文标题】:Border around tr element doesn't show? 【发布时间】:2013-09-11 19:23:30 【问题描述】:Chrome/Firefox 似乎不会在tr
上呈现边框,但如果选择器是table tr td
,它会呈现边框。
如何在 tr 上设置边框?
我的尝试,不起作用:
table tr
border: 1px solid black;
<table>
<tbody>
<tr>
<td>
Text
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/edi9999/VzPN2/
这是一个类似的问题:Set border to table tr, works in everything except IE 6 & 7,但它似乎在除 IE 之外的任何地方都有效。
【问题讨论】:
我使用的是 firefox,但没有看到边框 【参考方案1】:将此添加到样式表中:
table
border-collapse: collapse;
JSFiddle.
the specification 中实际上很好地描述了它以这种方式运行的原因:
在表格单元格上设置边框有两种不同的模型 CSS。一种最适合所谓的左右分界线 单个单元格,另一个适用于边界 从桌子的一端到另一端连续。
... 以及之后的collapse
设置:
在折叠边框模型中,可以指定边框 包围单元格、行、行组、列和列的全部或部分 组。
【讨论】:
为什么边框被隐藏了? 因为这就是separate
- 默认 - 表格边框模型的工作原理:您为每个单元格指定边框。我将使用文档中的引号更新答案。
@edi9999 - 我建议使用重置样式表。看看这个http://www.cs-s-reset.com/
对隐藏边框的具体解释是引用的 CSS 规范中的这句话,在分离边框模型中应用:“行、列、行组和列组不能有边框 (即,用户代理必须忽略这些元素的边框属性)。”
玩你的提琴手的例子有帮助,谢谢;)以上是关于tr 元素周围的边框不显示?的主要内容,如果未能解决你的问题,请参考以下文章