围绕tr元素的边框不显示？ [英] Border around tr element doesn't show?

问题描述

似乎Chrome / Firefox不会在 tr 上呈现边框，但如果选择器 table tr td 。

It seems like Chrome/Firefox do not render borders on tr, but it renders the border if the selector is table tr td.

如何在tr上设置边框？

How can I set a border on a tr ?

工作：

HTML

<table>    
    <tbody>
        <tr>
            <td>
                Text
            </td>
        </tr>
    </tbody>
</table>

CSS

table tr
{
    border:1px solid black;
}

http://jsfiddle.net/edi9999/VzPN2/

这是一个类似的问题：设置边框到表tr，除IE 6& 7 ，但它似乎在除了IE之外的任何地方都有效。

This is a similar question: Set border to table tr, works in everything except IE 6 & 7 , but it seems to work everywhere except for IE.

推荐答案

将此添加到样式表：

table {
  border-collapse: collapse;
}

JSFiddle 。

它的行为方式的原因实际上在规范：

The reason why it behaves this way is actually described pretty well in the specification:

单元格在
CSS。一个最适合于围绕
个单元的所谓分离边界，另一个适用于从表的一端到另一端连续的
边界。

There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated borders around individual cells, the other is suitable for borders that are continuous from one end of the table to the other.

...以及 collapse 设置：

在折叠边框模型中，可以指定
包围单元格，行，行组，列和列
组的所有或部分的边框。 / p>

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.

这篇关于围绕tr元素的边框不显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！