6

テーブル行にアウトラインがある場合、Google chromeでは最初の行にのみ表示されます

このCSSを使用して：

tr { 
      outline:1px solid red; 
   }

最初の行にのみアウトラインが表示されます。このリンクをクロムで開くと、次のことがわかります。

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

それは適切でしょうか？

警告: これは Google Chrome for Mac でのみテストしました。

于 2012-08-11T18:52:22.600 に答える
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 に答える
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、テーブル内の境界線の「罫線」を定義する属性があります。ただし、次の点に注意してください。

rules 属性は、すべての主要なブラウザでサポートされています。

注: rules 属性は、バージョン 9 より前の IE ではサポートされていません。

注: Chrome と Safari では、この属性が誤って表示されます。これらは、影響を受ける外側の境界線を内側の境界線に加えて追加します。

これをフレーム属性と元の質問の CSSと組み合わせると、各行にボックス化されたアウトラインが表示されます。

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

結果

JSBin に対するこの修正は、こちらで確認できます。

(Mac Chrome でテスト済み)

（以前の回答はCSSに集中しているため、これを別の回答として追加しました.HTMLのみを使用するこのソリューションは、回答を分離するのに十分に明確であるようです）

于 2012-08-13T22:36:29.003 に答える
0

これは、ここに示されているように機能し、大きな副作用はないと思います。

tr
{
  display: table-row-group;
  outline:1px solid red;
}
于 2012-08-13T23:22:12.307 に答える
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

以下のようなコードを使用できます。

テーブルの HTML コードは次のとおりです。

<table rules='none'>

</table>

cssを次のように変更します

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

どのブラウザでも、真ん中の境界線をそのままレンダリングします。

于 2012-08-16T14:30:52.853 に答える
-1

ええ、それはバグです

アウトラインの代わりにボーダーを試して、表のスタイルを指定してくださいborder-collapse:collapse

html、css に変更はありません

tr.sel
{
  border:1px solid red; 

}
table{
  border-collapse:collapse;
}

デモ

フィドル、jsbin

于 2012-08-20T07:51:15.410 に答える