css轮廓始终在chrome上的第一个表行

Question

在谷歌浏览器上,如果你在表格行上有轮廓,你只能在第一行得到它

所以使用这个css:

tr { 
      outline:1px solid red; 
   }

你只会在第一行得到大纲,你可以看到,如果你在chrome中打开这个链接:

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

有谁知道任何解决方法/修复此问题？

谢谢

Answer 1

虽然它似乎是一个bug,有点谷歌搜索,我发现一个工作的解决方案作为这个问题的一部分

添加:

display: block;

似乎工作:

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

编辑结果可以在这里看到

我更多地使用CSS来解决这个问题,并想出了这个:

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

那会合适吗？

警告:我只在Google Chrome for Mac上测试过这个问题.