Как заставить заголовки и нижние колонтитулы таблицы DIV повторяться, когда таблица Div разбивается при разрыве страницы при печати - PullRequest
Новая
       24

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

1 голос
/ 02 апреля 2020

Я пытаюсь заменить обычную таблицу html с помощью DIV. Тем не менее, он не ведет себя так, как я ожидаю, когда таблица разделяется с разрывом страницы при печати или визуализации в PDF. Я бы предположил, что он будет вести себя как обычная таблица, где верхний колонтитул таблицы повторяется вверху страницы, а нижний колонтитул внизу таблицы.

[строка заголовка]

[Строки таблицы]

--- разрыв страницы ---

[строка заголовка]

[строки таблицы]

[строка нижнего колонтитула] 

.Table {
  display: table;
  width: 100%;
}

.TableRow {
  display: table-row;
}

.TableHeading {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}

.TableCell,
.TableHead {
  display: table-cell;
  padding: 3px 10px;
  border: 1px solid #999999;
}

.TableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}

.TableBody {
  display: table-row-group;
}
<div class="Table">
  <div class="TableHeading">
    <div class="TableHead">
      Month
    </div>
    <div class="TableHead">
      Person
    </div>
    <div class="TableHead">
      Amount
    </div>
  </div>
  <div class="TableBody">
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
  </div>
  <div class="TableFoot">
    <div class="TableHead">
      &nbsp;
    </div>
    <div class="TableHead">
      &nbsp;
    </div>
    <div class="TableHead">
      €1234
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 07 апреля 2020

Скопировал ваши фрагменты кода, и я обнаружил, что работает должным образом (повторяется) в Firefox & Edge, но не Chrome & Opera. Поэтому я подумал, что это какая-то конкретная ошибка браузера c, и после некоторого поиска я нашел следующее:

break-inside: избежать;

Добавьте это CSS в .TableHeading и .TableFoot - проверил и работает. Но это несколько нарушает вертикальное выравнивание нижнего колонтитула

Решение было найдено здесь , с историей и объяснением.

Надежда, которая помогает

...