css outline always on first table row on chrome

Question

on google chrome when you have outline on a table row you get it only on the first row

so using this css:

tr { 
      outline:1px solid red; 
   }

you'll get the outline only on the first row, you can see that if you open this link in chrome:

http://jsbin.com/enupey/27/edit

anybody knows any workaround/fix for this ?

Thank You

Answer 1

Though it appears to be a bug, a little googling and I found a working solution as part of this question

Adding:

display: block;

appears to work:

tr
{
  outline:1px solid red;
  display: block;
}

The edited result can be seen here

---

I fiddled around with the CSS a bit more and came up with this:

td
{
  border-top:1px solid red;
  border-bottom:1px solid red;
  bottom-padding:-1px;
}

table
{
  border-left:2px solid red;
  border-right:2px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  bottom-padding:-1px;
}

Would that be suitable?

Caveat: I did only test this on Google Chrome for Mac.