Cara Membagi halaman hasil cetak printer dengan css

Tips CSSJika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulitkan kita untuk membaca ataupun mengarsipkanya.

Jika anda seorang pengembang aplikasi web, ini juga sering terjadi pada saat anda membuat laporan yang berisi sebuah daftar yang menampilkan banyak record. Jika dicetak pasti hasilnya tidak konsisten jumlahnya bisa halaman pertama 10, halaman berikutnya 12 dan seterusnya. Dan banyak lagi contoh lainya.

Untuk itu kita bisa menggunakan perintah css, agar hasil cetaknya lebih rapi dan konsiten pada setiap halamanya. Silahkan gunakan kode berikut pada halaman html/css anda.

<style type="text/css" media="print">
    .page-break  { display:block; page-break-before:always; }
</style>

Kemudian tambahkan kode berikut pada setiap bagian yang ingin dipisah halaman cetaknya.

<div class="page-break"></div>

Dengan kode diatas otomatis pada saat sebuah halaman web kita cetak maka akan dipisah ke halaman berikutnya.

 

Semoga bermanfaat.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.
  • Membuat efek kotak tulisan dengan css
    Panduan Cara Membuat efek kotak tulisan dengan css
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.

Kiriman terbaru