web-dev-qa-db-ja.com

<tr>タグでcss背景色を取得して行全体にまたがる方法

テーブルの行全体（<tr>タグ）にまたがる背景色を取得するために、cssで考えることができるすべてを試しましたが、各セルの周りに白い境界線を取得し続けます。

CSS（抜粋）：

/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}

HTML（抜粋）：

<tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr>

協力したくないだけです。助けてくれてありがとう...

htmlcssbackground-color
49
H. Ferrence
table{border-collapse:collapse;}
48
Jaspero

境界線を削除するとshould、背景色がセル間に隙間なくペイントされます。 this jsFiddle を注意深く見ると、白い隙間のない行全体に明るい青の色が広がっていることがわかります。

他のすべてが失敗した場合、これを試してください：

table { border-collapse: collapse; }
5
BoltClock

これを試して：

    .rowhighlight > td { background: green;}
4
Atte Väätäinen

border-spacingを使用すると、柔軟性が高まるため、使用することを好みます。例えば、あなたはできる

table {
  border-spacing: 0 2px;
}

これは、垂直の境界線を折りたたむだけで、水平の境界線をそのまま残します。これは、OPが実際に探していたように聞こえます。

border-spacing: 0はborder-collapse: collapseと同じではないことに注意してください。 here のようにtrに独自の境界線を追加する場合は、後者を使用する必要があります。

4
dlsso

FirefoxとChromeは異なります
ChromeはTRの背景色を無視します
例： http://jsfiddle.net/T4NK3R/9SE4p/

<tr style="background-color:#F00">
     <td style="background-color:#FFF; border-radius:20px">
</tr>

FFではTDは赤い角を取得し、Chromeではない

2
T4NK3R
tr.rowhighlight td, tr.rowhighlight th{
    background-color:#f0f8ff;
}
2
Álvaro González

これは、div内でもうまくいきました：

      div.cntrblk tr:hover td {
        line-height: 150%;
        background-color: rgb(255,0,0);
        font-weight: bold;
        font-size: 150%;
        border: 0;
      }

行全体を選択しましたが、ヘッダーを実行したくないので、まだ見ていません。また、partiallyホバーで拡大しないフォントを修正しました???行ではなくセルに設定を適用するように見えますが、tr：hoverですべてのコンポーネントセルを選択します。一貫性のないフォントスケーリングの問題を追跡します。 CSSがこれを行うのは良いことです。

0
webgeek atlbike

間隔をゼロに設定しようとしましたか？

/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}
0
Geert Immerzeel