是否有可能以某种方式在表格行周围设置边框？

我试图在鼠标进入行时改变它的颜色的特定表格行周围添加边框。但是，除非使用border-collapse:collapse;，否则我根本看不到边框，但是我必须避免边框折叠，因为在某些情况下，边框可以左右两边看到，但不是最上面（可能是因为我无法使用填充/边距当使用border-collapse时）。是否有可能以某种方式在表格行周围设置边框？

有没有办法做到这一点？

<table style="border-collapse:collapse;"> 
    <tr style="border:1px solid black"> 
    <td>Cell_1</td> 
    <td>Cell_2</td> 
    </tr> 
</table>

来源

2010-08-28 wdguru

是什么浏览器您使用？我可以看到边界有没有_border-collapse：collapse; _ – 2010-08-28 05:41:27

您可以尝试使用outline代替。

tr:hover { 
    outline: 1px solid #999; 
}

看一看：http://jsfiddle.net/dWWkx/3/

来源

2010-08-28 05:39:56

谢谢，这似乎是我正在寻找的exacly。不过，我没有看到谷歌浏览器的边框，而Firefox 3.6按预期显示。奇怪... – wdguru 2010-08-28 06:47:16

@wdguru嗯......大纲属性的问题在于，它比其他任何东西都更多地用作调试工具，因为边框的位置在规范中没有明确定义。有可能Webkit不支持'tr'的大纲 - IE 7以下不支持。请参阅：http://reference.sitepoint.com/css/outline – 2010-08-28 07:27:30

-1

试试这个：

<table style="">  
    <tr style="display:block;border:1px solid black">  
     <td>Cell_1</td>  
     <td>Cell_2</td>  
    </tr>  
    <tr style="display:block;border:1px solid black">  
     <td>Cell_1</td>  
     <td>Cell_2</td>  
    </tr>  
</table>

来源

2010-08-28 05:41:26

谢谢，但我已经尝试过。 display：block的问题在于，该行不像使用display：table-row那样进行拉伸。 – wdguru 2010-08-28 06:51:46

据我知道你不能把边框上表中的行，但你可以在表格单元格（<td>）。使用一些具有创意边界的右边界和左边界，单元格间距为0，您应该能够在整个行周围出现边框。

来源

2010-08-28 06:25:46

我有完全相同的问题，并发现此变通办法：

<tr class="border_bottom">

CSS：

tr.border_bottom td { 
    border:1pt solid black; 
}

在这里发现了它，并调整它：Add border-bottom to table row <tr>

来源

2016-11-03 19:55:46

是否有可能以某种方式在表格行周围设置边框？

回答

相关问题