6

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

所以使用这个CSS：

tr { 
      outline:1px solid red; 
   }

您只会在第一行获得大纲，如果您在 chrome 中打开此链接，您会看到：

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

有人知道任何解决方法/解决方法吗？

谢谢你

4

8 回答 8

5

虽然它似乎是一个错误，但有点谷歌搜索，我找到了一个可行的解决方案作为这个问题的一部分

添加：

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

那会合适吗？

警告：我只在 Mac 版 Google Chrome 上进行了测试。

于 2012-08-11T18:52:22.600 回答
1

你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

于 2012-08-20T07:43:10.153 回答
1

该table标签有一个rules属性，允许您定义边框在表格中的“规则”位置。但是，请注意：

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

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

注意：Chrome 和 Safari 不正确地显示此属性：除了内边框外，它们还添加了受影响的外边框。

将其与原始问题中的frame 属性和 CSS 相结合，可以在每一行上提供盒装轮廓：

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

结果

你可以在这里看到对 JSBin 的修改

（在 Mac Chrome 上测试）

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

于 2012-08-13T22:36:29.003 回答
1

由于某些原因，这不是一个完美的答案，但我将它作为一个选项扔在那里......border-collapse: collapse;在元素上设置，并在每一行和元素TABLE周围设置样式边框。有关最终输出，请参阅此 JSBin。因为它依赖于它，如果没有IE6/7 中的附加 HTML 属性，它将无法工作。如果您要单独勾勒每一行，它也可能不会产生您正在寻找的相同效果。该解决方案还依赖于和伪选择器的使用，而 IE8 不支持. 这可以通过在某些元素上添加“first”和“last”作为类来解决，但这并不理想。TDTHborder-collapsecellspacing:first-child:last-child:last-child

于 2012-08-13T23:20:33.743 回答
0

您可以使用如下代码。

表格的 Html 代码是

<table rules='none'>

</table>

并用

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

它将在任何浏览器中呈现中间 raw 的边框。

于 2012-08-16T14:30:52.853 回答
0

解决您的问题：将您的 CSS 更改为。

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

或者

  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% 20所有者%20总结

于 2012-08-20T13:30:59.513 回答
0

这正如这里所展示的那样有效，我相信没有任何主要的副作用：

tr
{
  display: table-row-group;
  outline:1px solid red;
}
于 2012-08-13T23:22:12.307 回答
-1

是的，它是一个错误

尝试边框而不是轮廓，并给出表格样式border-collapse:collapse

html，css现在没有变化

tr.sel
{
  border:1px solid red; 

}
table{
  border-collapse:collapse;
}

演示

小提琴，jsbin

于 2012-08-20T07:51:15.410 回答