Question

在谷歌浏览器上，当你在表格行上有轮廓时，你只能在第一行得到它

所以使用这个css：

tr { 
      outline:1px solid red; 
   }

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

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

任何人都知道任何解决方法/修复此问题吗？

谢谢

Answer 1

虽然它似乎是一个bug，有点谷歌搜索，我找到了一个工作的解决方案作为this question的一部分

添加：

display: block;

似乎有效：

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

可以看到编辑后的结果here

我更多地调整了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上测试过这个。

Answer 2

table tag has a rules attribute允许您定义表格中“边界”的边界位置。但请注意：

所有主流浏览器都支持rules属性。

注意：先前版本9的IE不支持rules属性。

注意：Chrome和Safari会错误地显示此属性：他们会添加   除内部边界外，受影响的外部边界。

将此与原始问题中的frame attribute和CSS相结合，这会在每行上提供带框的轮廓：

<table rules="rows" frame="box">

Outcome

您可以看到对JSBin here

的此修订

（在Mac Chrome上测试）

（我将此作为一个单独的答案添加，因为我以前的答案集中在CSS，这个解决方案，只使用HTML似乎足以分开答案）

Answer 3

由于一些原因，这不是一个完美的答案，但我将其作为一个选项折腾...在border-collapse: collapse;元素上设置TABLE，并在每一行的{{1}周围设置样式边框1}}和TD元素。有关最终输出，请参阅this JSBin。因为它依赖于TH，所以如果没有IE6 / 7中的额外border-collapse HTML属性，它将无法运行。如果您希望单独列出每一行，它也可能无法提供您正在寻找的相同效果。解决方案还取决于cellspacing和:first-child伪选择器的使用，IE8不支持:last-child。这可以通过在某些元素上添加“first”和“last”作为类来解决，但这并不理想。

Answer 4

使用display: block，您可以：

HTML：

<table>
  <tr>
    <td>ads</td>
    <td>azx</td>
    <td>bbb</td>
  </tr>
  <tr class='sel'>
    <td>ads</td>
    <td>azx</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>ads</td>
    <td>azx</td>
    <td>bbb</td>
  </tr>
</table>

CSS：

tr
{
display: block;
}

tr.sel
{
  outline: 1px solid red;
}

输出为：http://jsbin.com/enupey/79/edit

Answer 5

这可以证明here，但我相信没有任何重大的副作用：

tr
{
  display: table-row-group;
  outline:1px solid red;
}

Answer 6

您可以使用以下代码。

表的Html代码是

<table rules='none'>

</table>

并使用

更改css

tr.sel
{
  border:1px solid red;
}

它将在任何浏览器中渲染中间原始边框。

Answer 7

修复您的问题：将您的CSS更改为。

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

OR

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

如果你是concerned with table layout，那么你必须通过将margin设置为某个负值来与空格战斗。看到这里：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

已经报告了一个错误跟进链接：http://code.google.com/p/chromium/issues/detail?id=81373&q=outline&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary

Answer 8

是的，这是一个错误

尝试使用border而不是outline，并提供表格样式border-collapse:collapse

html，css现在没有变化

tr.sel
{
  border:1px solid red; 

}
table{
  border-collapse:collapse;
}

演示

fiddle，jsbin

css轮廓总是在chrome上的第一个表行

8 个答案: