Группировка колонок таблицы 9/18

Курсы §29. Таблицы на CSS
1

Здравствуйте. Объясните пожалуйста:

  1. Почему когда мы задаем .checklist .column-group { display: table-column-group;} оставшиеся колонки тоже получают фон?

  2. Почему на .checklist .column-group не работает background-image: url("img/wall-2.png");? Он же должен задавать фон всем ячейкам внутри.

Насколько я понял display: table-column-group; просто обобщает все display: table-column;, как бы задавая параметры сразу для всех. Очень надеюсь на вашу помощь. Заранее спасибо.

    <!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Группировка колонок таблицы</title>
    <meta charset="utf-8">
    <link href="course.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body class="wood">
    <article class="checklist united">
      <h1>Вещи в дорогу</h1>
      <div class="column"></div>
      <div class="column-group">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
      </div>
      <header>
        <ul>
          <li><img src="img/magic-hat.svg" alt=""></li>
          <li><img src="img/hunter-hat.svg" alt=""></li>
          <li><img src="img/boot.svg" alt=""></li>
          <li><img src="img/badge.svg" alt=""></li>
        </ul>
      </header>
      <section class="content">
        <ul>
          <li><img src="img/sword.svg" alt=""></li>
          <li><img src="img/shield.svg" alt=""></li>
          <li><img src="img/stick.svg" alt=""></li>
          <li><img src="img/bow.svg" alt=""></li>
        </ul>
      </section>
      <section class="content content-important">
        <ul>
          <li><img src="img/beer.svg" alt=""></li>
          <li><img src="img/meat.svg" alt=""></li>
          <li><img src="img/wine.svg" alt=""></li>
          <li><img src="img/goblet.svg" alt=""></li>
        </ul>
      </section>
      <footer>
        <ul>
          <li><img src="img/money.svg" alt=""></li>
          <li><img src="img/blue-crystal.svg" alt=""></li>
          <li><img src="img/green-crystal.svg" alt=""></li>
          <li><img src="img/skull.svg" alt=""></li>
        </ul>
      </footer>
    </article>
  </body>
</html>

.checklist {
  display: table;
}

.checklist ul {
  display: table-row;
}

.checklist li {
  display: table-cell;
}

.checklist h1 {
  display: table-caption;
}

.checklist header {
  display: table-header-group;
}

.checklist header li {
  border-color: #3d9970;
}

.checklist footer {
  display: table-footer-group;
}

.checklist footer li {
  border-color: #0074d9;
}

.checklist .content {
  display: table-row-group;
}

.checklist .content li {
  border-color: #ff851b;
}

.checklist .content-important li {
  border-color: #ff4136;
}

.checklist .column {
  display: table-column;
  background-image: url("img/wall-1.png");
}

.checklist .column-group {
  display: table-column-group;
}

.checklist .column-group .column {
  background-image: url("img/wall-2.png");
}