有没有办法在表格行周围添加边框？

Question

我试图在特定的表格行周围添加边框，当鼠标进入该行时会更改其颜色。然而，除非使用border-collapse:collapse;，否则我根本看不到边框，但是我必须避免使用border-collapse，因为在某些情况下，边框在左侧、右侧和底部可见，但在顶部不可见（可能是因为使用border-collapse时无法具有填充/边距）。是否有办法实现这一点？

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

- wdguru

---

你使用的是哪个浏览器？我可以看到有边框和没有边框 _border-collapse:collapse;_。 - Nikita Rybak

Answer 1

你可以尝试使用outline替代。

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

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

- Yi Jiang

---

谢谢，这似乎正是我在寻找的。然而，我在Google Chrome中看不到边框，而Firefox 3.6则按预期显示。奇怪... - wdguru

@wdguru 嗯...关于轮廓属性的问题是，它更多地被用作调试工具，而不是其他任何东西，因为边框的位置在规范中没有明确定义。Webkit可能不支持在 tr 上使用轮廓 - IE 7及以下根本不支持此功能。请参见：http://reference.sitepoint.com/css/outline - Yi Jiang

Answer 2

据我所知，您无法在表格行上放置边框，但是您可以在表格单元格（<td>）上放置边框。通过一些创造性的border-right和border-left，以及cell-spacing设置为0，您应该能够实现整个行周围出现边框的外观。

- Pramendra Gupta

Answer 3

我曾经遇到过完全相同的问题，并找到了这个解决方法：

<tr class="border_bottom">

CSS：

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

在这里找到并进行调整：为表格行 <tr> 添加下边框

- Psyko-Mike

Answer 4

试试这个：

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

- Moin Zaman

---

谢谢您的回答，但是我之前尝试过了。使用 display:block 的问题在于，行并没有像使用 display:table-row 时那样被拉伸。 - wdguru