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

那會合適嗎？

警告：我只是在谷歌Chrome for Mac上測試過。

Answer 2

table標簽有一個rules屬性 ，允許您定義表格中“邊界”的邊界位置。 但請注意：

所有主流瀏覽器都支持rules屬性。

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

注意：Chrome和Safari會錯誤地顯示此屬性：除內部邊框外，還會添加受影響的外部邊框。

將此與框架屬性和原始問題中的CSS結合使用，可在每行上提供帶框的輪廓：

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

你可以在這里看到JSBin的這個修正

（在Mac Chrome上測試過）

（我已將此作為一個單獨的答案添加，因為我以前的答案集中在CSS，這個解決方案，只使用HTML似乎足以分開答案）

Answer 3

由於一些原因，這不是一個完美的答案，但我把它作為一種選擇折騰...設置border-collapse: collapse; 在TABLE元素上，每個行的TD和TH元素周圍都有樣式邊框。 請參閱此JSBin以獲取最終輸出。 因為它依賴於border-collapse所以如果沒有IE6 / 7中的其他cellspacing HTML屬性，它將無法工作。 如果您希望單獨列出每一行，它也可能無法提供您正在尋找的相同效果。 解決方案還取決於:first-child和:last-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

這可以在這里展示，我相信沒有任何重大的副作用：

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

要么

  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＆cfpec = ID％20Pri％20Mstone％20ReleaseBlock％20OS％20Area%20Feature%20Status% 20Owner％20Summary

Answer 8

呀，這是一個錯誤

嘗試邊框而不是輪廓，並給表格樣式border-collapse:collapse

html，css現在沒有變化

tr.sel
{
  border:1px solid red; 

}
table{
  border-collapse:collapse;
}

演示

小提琴 ， jsbin