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

时间:2010-08-28 05:35:14

标签: html css html-table

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

有没有办法实现这个目标?

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

4 个答案:

答案 0 :(得分:8)

您可以尝试使用outline代替。

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

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

答案 1 :(得分:2)

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

答案 2 :(得分:0)

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

<tr class="border_bottom">

CSS:

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

在此处找到并调整它:Add border-bottom to table row <tr>

答案 3 :(得分:-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>