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

Posted 2023-03-05

【中文标题】是否可以以某种方式在表格行周围设置边框？

【英文标题】：Is it possible to have a border around a table row in some way?

【发布时间】：2011-04-05 02:43:59

【问题描述】：

我正在尝试在特定表格行周围添加边框，当鼠标进入该行时，这些边框会改变其颜色。但是，除非使用border-collapse:collapse;，否则我根本看不到边框，但我必须避免边框折叠，因为在某些情况下，边框在左、右和底部可见但在顶部不可见（可能是因为我不能有填充/margin 当使用边框折叠时）。

有没有办法做到这一点？

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

【问题讨论】：

你用的是什么浏览器？我可以看到有和没有 border-collapse:collapse;

的边框

【参考方案1】：

您可以尝试改用outline。

tr:hover 
    outline: 1px solid #999;

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

【讨论】：

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

@wdguru 嗯... outline 属性的问题在于它更多地用作调试工具，因为规范中没有明确定义边框的位置。 Webkit 可能不支持tr 上的大纲 - IE 7 及以下版本根本不支持此功能。见：reference.sitepoint.com/css/outline

【参考方案2】：

据我所知，您不能在表格行上设置边框，但可以在表格单元格上设置边框 (<td>)。 通过一些创造性的border-right和border-left，单元格间距为0，您应该能够实现整个行周围的边框外观。

【参考方案3】：

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

<tr class="border_bottom">

CSS：

tr.border_bottom td 
   border:1pt solid black;

在这里找到并调整它：Add border-bottom to table row <tr>

【参考方案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>

【讨论】：

谢谢，但我以前试过这个。 display:block 的问题是，该行没有像 display:table-row 那样被拉伸。