是否有任何理由不能使用 CSS 在 html 表格中的 <tr> 周围放置边框

Posted 2023-03-05

【中文标题】是否有任何理由不能使用 CSS 在 html 表格中的 <tr> 周围放置边框

【英文标题】：Is there any reason you can't put a border around a <tr> in an html table using CSS

【发布时间】：2011-11-06 04:50:49

【问题描述】：

我有一个表，我有一个类设置为“underRow”的 tr。

在 CSS 中我有：

.underRow 
 border-bottom-color: #7a26b9;
 border-bottom-style: solid;
 border-bottom-width: 1px;

但行边框似乎根本没有改变。如果我将类属性向下移动到 td，它可以正常工作（但问题是我在中间有一个空格，填充位于单元格之间。我想避免这个空格并在行下方有一条直线。

将 CSS 边框属性放在行 (tr) 元素上有什么问题吗？

这是此表中的其余 CSS 以供参考：

.quantityTable 
    border-radius: 5px 5px 5px 5px;
    background-color: #d6b4E1;
    padding: 5px;
    margin-bottom: 5px;
    width: 100%;
    border-width: 2px;
    border-color: #7a26b9;
    border-style: solid;

【问题讨论】：

查看我的答案@ooo 的编辑

【参考方案1】：

不应该可以的。

看到这个：http://jsfiddle.net/jasongennaro/qCzrg/

也许你需要用

折叠你的边框

border-collapse:collapse

或者TD 的其他样式可能会被覆盖

你能再显示一些代码吗？

根据您的修改：

（但问题是我在中间有一个空格，其中填充 是在细胞之间。我想避开这个空间，直走 行下方的行。

听起来你肯定需要border-collapse

你应该把它添加到table的样式中。

这里有更多关于它的信息：http://www.the-art-of-web.com/css/bordercollapse/

编辑 2

基于新代码和以下注释：

问题是，如果我使用：border-collapse:collapse 那么 边框半径样式不再起作用

我猜你想要这样的东西

.quantityTable
    border-radius: 15px 15px 15px 15px;
    background-color: #d6b4E1;
    margin-bottom: 5px;
    width: 100%;    


.underRow
    border-bottom-color: #7a26b9;
    border-bottom-style: solid;
    border-bottom-width: 1px;


.underRow:last-child
    border-bottom:none;


.underRow td
    padding: 15px;  

例如：http://jsfiddle.net/jasongennaro/qCzrg/1/

注意

我把半径放大了，这样你可以更容易看到。

我还删除了表格本身的边框

【讨论】：

问题是如果我使用：border-collapse:collapse 那么边界半径样式就不再起作用了。

将border-collapse:collapse 放在桌面上对我有用

【参考方案2】：

某些浏览器的某些版本不喜欢在tr 元素上设置边框样式。

您始终可以将它们设置在他们的tds 上。

.underRow td 
    border-bottom: 1px solid #7a26b9;

如果有边框间距，您可能需要使用border-collapse: collapse; 折叠表格边框。

【讨论】：

我在 tds 上使用类属性对问题进行了一些更新。反正这周围有没有，所以我在行下方有一条直线。

我可以查看您的表格的其余 CSS 吗？以及桌子本身。也许把它放在 jsFiddle 上。

我用桌面上的其余 css 更新了问题。

现在的问题是，如果我使用：border-collapse:collapse 那么边框半径样式将不再起作用