Bagaimana cara menambahkan batas di bagian bawah setiap tabel paginasi dengan CSS?

Saya memiliki daftar besar data di dalam tabel HTML yang diambil dari database, yang kemudian dicetak ke PDF. Tabelnya hanyalah tabel biasa, dengan beberapa kolom, tetapi gaya yang saya gunakan memiliki batas kiri dan kanan untuk menampilkan garis vertikal pada setiap tabel di setiap halaman, tetapi tidak seperti garis horizontal. Saya menggunakan CSS untuk menggambar perbatasan, seperti ini:

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

Masalah yang saya dapatkan adalah ketika diberi halaman (dicetak ke PDF) pada setiap halaman di bagian bawah tabel, tidak ditutup sehingga terlihat terbuka. Saya ingin menutup batas di bagian bawah tabel setiap halaman.

Saya berhasil menggambar batas baris terakhir menggunakan tfoot, ini berfungsi dengan baik sampai saya sampai ke halaman terakhir, ternyata juga menggambarnya di sana. Nggak mau seri di akhir karena saya sudah buat ringkasannya di sana, jadi garisnya di situ saja tidak bagus.

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

CSSnya, saya menggunakan warna merah untuk highlight di meja saya:

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

Jadi pertanyaan saya apakah ada css yang bisa menggambar garis sederhana di setiap halaman akhir tetapi tidak di halaman terakhir?

Jika menggunakan tfoot, saya sudah mencoba mencari solusinya, kurang lebih seperti postingan di bawah ini, namun agak berbeda, saya tidak ingin tfoot muncul di halaman terakhir, tetapi halaman lainnya boleh saja.

Cara membuat TFOOT ditampilkan hanya di akhir tabel

Terima kasih sebelumnya.

PS. Terima kasih Ben atas perbaikan formatnya, ini postingan pertama saya :)


html pagination css
person cuppacoffee    schedule 04.04.2016    source sumber
comment
Tidak masalah, apakah penggantian <foot> dengan <tfoot> membantu?   -  person Ben Fransen    schedule 04.04.2016

Jawaban (2)


arrow_upward
0
arrow_downward

Saya telah memperbarui pertanyaan Anda dan saat memformat saya melihat setidaknya ada <td> yang salah tempat di <tfoot> Anda. Anda juga membuka dengan <foot>, yang seharusnya <tfoot>.

person Ben Fransen    schedule 04.04.2016

arrow_upward
0
arrow_downward

Anda dapat menggunakan sesuatu seperti ini untuk menerapkan semua tfoot kecuali anak terakhir.

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

Jawaban pertama, koreksi saya jika ada kesalahan.

person Wee Hui Pherng    schedule 04.04.2016
comment
Terima kasih Wee Hui Pheng atas jawabannya tetapi sayangnya itu tidak berhasil untuk saya. Saya menggunakan MPDF untuk menghasilkan PDF, dan saya menemukan bahwa hal mewah seperti itu tidak berfungsi pada semua CSS. Saya mencoba menggunakan anak ke-n (ganjil) juga sehingga warna latar belakang untuk semua baris ganjil berbeda dari baris genap, juga tidak berfungsi. Saya kira MPDF belum mencapai itu. - person cuppacoffee; 06.04.2016
comment
versi MPDF yang saya gunakan adalah 5.7.4 - person cuppacoffee; 06.04.2016