Is it possible to have a border around a table row in some way?

Question

I'm trying to add borders around specific table rows which change it's colors when the mouse enters the row. However, I don't see a border at all unless using border-collapse:collapse; but I have to avoid border-collapse, since in some cases the border is visible left, right and at bottom but not on top (probably because I cannot have padding/margin when using border-collapse).

Is there a way to achieve this?

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

What browser are you using? I can see border with and without _border-collapse:collapse;_ — Nikita Rybak, Aug 28 '10 at 05:41

score 12 · Answer 1 · answered Aug 28 '10 at 05:39

12

You can try using outline instead.

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

Have a look: http://jsfiddle.net/dWWkx/3/

answered Aug 28 '10 at 05:39

Yi Jiang

49,435
16
136
136

Thanks, this seems to be exacly I was looking for. However, I dont see the borders with Google Chrome, while Firefox 3.6 displays it as expected. Strange... – wdguru Aug 28 '10 at 06:47
@wdguru Hmm... the problem with the outline property is that its used more as a debugging tool than anything else, since the position of the border is not defined clearly in the specs. Its possible that Webkit does not support outline on `tr` - IE 7 and below does not support this at all. See: http://reference.sitepoint.com/css/outline – Yi Jiang Aug 28 '10 at 07:27

score 2 · Answer 2 · edited Aug 28 '10 at 10:20

2

As far as I know you can't put a border on a table row, but you can on the table cell (<td>). With some creative border-right and border-left, with a cell-spacing of 0, you should be able to achieve the appearance of a border around the whole row.

edited Aug 28 '10 at 10:20

David Thomas

249,100
51
377
410

answered Aug 28 '10 at 06:25

Pramendra Gupta

14,667
4
33
34

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

i had exactly the same problem and found this workaround:

<tr class="border_bottom">

CSS:

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

Found it here and adjusted it: Add border-bottom to table row <tr>

edited May 23 '17 at 11:53

Community

1
1

answered Nov 03 '16 at 19:55

Psyko-Mike

1
1

score -1 · Answer 4 · edited Mar 14 '13 at 14:06

-1

try this:

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

edited Mar 14 '13 at 14:06

Barnee

3,212
8
41
53

answered Aug 28 '10 at 05:41

Moin Zaman

25,281
6
70
74

1

Thanks, but I've tried this before. The problem with display:block is, that the row isn't streched as it would be with display:table-row. – wdguru Aug 28 '10 at 06:51

Is it possible to have a border around a table row in some way?

4 Answers4

Linked