Как получить цвет фона css в теге <tr> для охвата всей строки

Я пробовал все, что я могу придумать в css, чтобы получить цвет фона для охвата всей строки таблицы (<tr> tag). Но я все равно получаю белую рамку вокруг каждой ячейки.

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>

Он просто не хочет сотрудничать. Спасибо, что помогли...

Ответ 1

table{border-collapse:collapse;}

Ответ 2

Удаление границ должно сделать цвет фона краской без каких-либо зазоров между ячейками. Если вы внимательно посмотрите на этот jsFiddle, вы увидите, что светло-голубой цвет простирается поперек строки без белых пробелов.

Если все остальное не удается, попробуйте следующее:

table { border-collapse: collapse; }

Ответ 3

Я предпочитаю использовать border-spacing, поскольку он обеспечивает большую гибкость. Например, вы могли бы сделать

table {
  border-spacing: 0 2px;
}

Который бы только развалил вертикальные границы и оставил горизонтальные в такте, что и похоже на то, что OP действительно искал.

Обратите внимание, что border-spacing: 0 не совпадает с border-collapse: collapse. Вам нужно будет использовать последний, если вы хотите добавить свою собственную границу в tr, как показано здесь.

Ответ 4

tr.rowhighlight td, tr.rowhighlight th{
    background-color:#f0f8ff;
}

Ответ 5

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 не

Ответ 6

Попробуйте следующее:

    .rowhighlight > td { background: green;}

Ответ 7

Вы пытались установить интервал равным нулю?

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

Ответ 8

Это работало для меня, даже внутри div:

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

Он выбрал всю строку, но я бы хотел, чтобы она не делала заголовок, пока не смотрела. Он также частично фиксировал шрифты, которые не масштабировались бы с зависанием??? По-видимому, вы должны применить настройки к ячейке не к строке, а выбрать все ячейки элементов с помощью tr: hover. Вкл. Для отслеживания непротиворечивой проблемы масштабирования шрифтов. Сладкий, что CSS сделает это.