Настройка цвета фона строки таблицы

Question

У меня есть таблица, которая простирается по всей странице.

Я использую nth-child, чтобы установить background из строки. Проблема в том, что это только окраска ячеек, а не целая строка. Вы можете видеть пробелы между ячейками цветных строк.

Вы можете увидеть пример here

table { 
 
    width: 100%; 
 
} 
 
tr:nth-child(even) { 
 
    background: peachpuff; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td>0</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>8</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9</td> 
 
      <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Как изменить background цвет всей строки, а не каждой отдельной ячейки?

Answer 1

добавить border-collapse:collapse к table

CSS-свойство границы Распад определяет границы за столом в являются разделены или свернуты. В отдельной модели соседние ячейки имеют свои собственные границы. В свернутой модели соседние ячейки разделяют границы.

Разделенная модель - это традиционная модель границы стола HTML. Смежные ячейки имеют свои собственные границы. Расстояние между ними задается свойством border-spacing.

В сложенной модели границы соседние ячейки таблицы разделяют границы. В модели эта модель, вставка границы вставки ведет себя как канавка, а начинает вести себя как гребень.

table { 
 
    width: 100%; 
 
    border-collapse:collapse; 
 
} 
 
tr:nth-child(even) { 
 
    background: peachpuff; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td>0</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>8</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9</td> 
 
      <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

Добавьте это в HTML:

<table cellspacing="0"> 

Или с помощью CSS

table {border-spacing: 0;} 

Answer 3

CSS-решение для этого использует border-spacing и border-collapse свойства.

Вот ваш table правило, обновление:

table { 
    width: 100%; 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

Раньше считалось, что запас и заполнение таблиц были в основном контролируются в HTML с атрибутами cellspacing и cellpadding.

<table border="1" cellpadding="5" cellspacing="10"> ... </table>

Но эти атрибуты в настоящее время на пути к устареванию. Используйте CSS.

Примеры

table { 
    border-collapse: separate; 
    border-spacing: 5px; 
} 

td { 
    padding: 5px; 
} 

Чтобы узнать больше о border-collapse этой статье.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Answer 4

По умолчанию есть некоторое расстояние между границами, чтобы удалить интервал использовать

table { 
    border-collapse: collapse; 
} 

или

table { 
    border-spacing: 0; 
} 

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