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 ?

我的尝试，但不起作用:

My try, which doesn't work:

table tr {
  border: 1px solid black;
}

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

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 设置:

... and later, for collapse setting:

在折叠边框模型中，可以指定边框包围单元格、行、行组、列和列的全部或部分组.

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屋！