Как добавить границу внизу каждой таблицы с разбивкой на страницы с помощью CSS?

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

td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

Проблема, с которой я столкнулся, заключается в том, что при разбиении на страницы (распечатке в PDF) на каждой странице внизу таблицы она не была закрыта, поэтому выглядит открытой. Я хочу закрыть границу внизу таблицы каждой страницы.

Мне удалось нарисовать границу последней строки с помощью tfoot, это прекрасно работает, пока я не дошел до самой последней страницы, видимо, он тоже рисует ее там. Не хочу, чтобы он рисовался в конце, потому что я уже сделал там резюме, поэтому иметь линию там просто нехорошо.

<thead>...some header...</thead>
<tfoot>
  <tr><td class=myborder>&nbsp;</td></tr>
</tfoot>
<tbody>...list of data (100 rows of tr)...</tbody>

CSS, я использую красный цвет для выделения на моем столе:

.myborder {
  border-top: 1px solid red;
}

Итак, мой вопрос: есть ли какой-нибудь css, который может рисовать простую линию на конце каждой страницы, но не на последней странице?

Если вы используете tfoot, я пытался найти решение, оно очень похоже на сообщение ниже, но немного отличается, я не хочу, чтобы tfoot отображался на последней странице, но любая другая страница в порядке.

Как заставить TFOOT показывать только в конце таблицы

Заранее спасибо.

PS. Спасибо Бен за исправления формата, это мой первый пост :)


html pagination css
person cuppacoffee    schedule 04.04.2016    source источник
comment
Ничего страшного, замена <foot> на <tfoot> помогла?   -  person Ben Fransen    schedule 04.04.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я обновил ваш вопрос и при форматировании заметил как минимум неуместный <td> в вашем <tfoot>. Также вы начинаете с <foot>, которое должно быть <tfoot>.

person Ben Fransen    schedule 04.04.2016

arrow_upward
0
arrow_downward

Вы можете использовать что-то подобное, чтобы применить ко всем tfoot, кроме последнего дочернего элемента.

tfoot:not(:last-child):after {
    border-bottom: 1px solid red;
}

Первый ответ, поправьте меня, если есть какая-то ошибка.

person Wee Hui Pherng    schedule 04.04.2016
comment
Спасибо Wee Hui Pheng за ответ, но, к сожалению, он не работает для меня. Я использую MPDF для создания PDF-файла и обнаружил, что такая причудливая штука не работает на всех CSS. Я также пытался использовать nth-child(odd), поэтому цвет фона для всех нечетных строк отличается от четных строк, что также не работает. Я предполагаю, что MPDF не до этого (пока). - person cuppacoffee; 06.04.2016
comment
я использую версию MPDF 5.7.4 - person cuppacoffee; 06.04.2016