Separate table styling in webpage mode and print preview browser mode on Laravel Blade

Create a condition from a print mode report using this Laravel Blade:

  • This report uses F4 landscape size with a margin of 1 cm. Don’t change it.
  • Table colors are still not consistent on the printed page. Make white for the table on the printed page. Separate zigzag color table styling only for web pages. Don’t get carried away on the printed page. (Prioritize this problem because I use a white background. Important is not resolved)
  • In the print CTRL + P browser, the zigzag color table styling is still carried over.
  • The table does not fill completely until the paper margin is down (not full items are displayed) on one F4 landscape printed page.
  • The URL on the printed page has not been replaced with ‘Dicetak Pada’ and is made only to be in the bottom left position of the last page just like the TTD.
  • The signature on the last page is correct. But it is still ‘overwritten’ by the table. Make it printable in place of the URL on the printed page, and the signature follows the end of the table and provides neat spacing. Position it at the bottom right of the table (like TTD in general)
  • I will provide a filecode view so I can analyze it later. Please provide the full code of changes and detailed before and after explanations so that I can understand.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>@extends('layouts.app_niceadmin_blank')
@section('content')
<style>
/* Styling untuk tampilan layar */
.table th, .table td {
text-align: center;
vertical-align: middle;
}
/* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */
.table th.no-col, .table td.no-col {
width: 60px;
}
.table th.nisn-col, .table td.nisn-col {
width: 100px;
}
.table th.nama-col, .table td.nama-col {
width: 250px;
}
.table th.month-col, .table td.month-col {
width: 90px;
padding: 4px;
}
/* Styling khusus untuk mode cetak */
@media print {
body {
margin: 0; /* Pastikan tidak ada margin pada body */
padding: 0; /* Pastikan tidak ada padding pada body */
font-size: 12pt;
color: black; /* Teks hitam */
}
.table {
border-collapse: collapse !important; /* Gabungkan border */
width: 100% !important; /* Pastikan tabel mengisi lebar penuh */
}
th, td {
border: 1px solid black !important; /* Border yang konsisten */
padding: 4px;
background-color: white !important; /* Sel berwarna putih */
color: black !important; /* Teks hitam */
}
tr {
background-color: white !important; /* Semua baris putih */
}
@page {
size: 33cm 21.5cm; /* Ukuran F4 landscape */
margin: 1cm; /* Margin 1 cm */
}
.signature {
position: absolute; /* Posisi absolute untuk fleksibilitas */
bottom: 2cm; /* Jarak dari bawah */
right: 1cm; /* Posisi di kanan */
text-align: right;
font-size: 12pt;
width: 300px;
}
.footer-note {
position: absolute; /* Posisi absolute */
bottom: 1cm; /* Posisi di kiri bawah */
left: 1cm;
font-size: 10pt;
width: auto;
}
body:after {
content: "Dicetak pada: " attr(data-print-date);
position: absolute;
bottom: 1cm;
left: 1cm;
font-size: 10pt;
display: none; /* Sembunyikan di halaman sebelumnya */
}
@page:last {
.signature {
display: block; /* Tampilkan tanda tangan di halaman terakhir */
}
.footer-note {
display: block; /* Tampilkan catatan di halaman terakhir */
}
body:after {
display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */
}
}
}
</style>
<div class="row justify-content-center pr-0">
<div class="col-md-12">
<div class="card">
<div class="card-body">
@include('kepala_sekolah.laporan_header')
<h4 class="my-0 py-0">LAPORAN REKAP PEMBAYARAN</h4>
<div class="my-2">{!! $subtitle !!}</div>
<div class="table-responsive">
<table class="table table-striped" style="border-collapse: collapse; width: 100%;">
<thead class="{{ config('app.thead_style') }}">
<tr>
<th class="no-col">No</th>
<th class="nisn-col">NISN</th>
<th class="nama-col">Nama</th>
@foreach ($header as $bulan)
<th class="month-col">
{{ ubahNamaBulan($bulan) }}
</th>
@endforeach
</tr>
</thead>
<tbody>
@php
$totalItems = 0; // Inisialisasi totalItems
@endphp
@forelse ($dataRekap as $item)
<tr>
<td class="no-col">{{ ++$totalItems }}</td> <!-- Menggunakan totalItems untuk penomoran -->
<td class="nisn-col">{{ $item['siswa']['nisn'] }}</td>
<td class="nama-col text-start">{{ $item['siswa']['nama'] }}</td>
@foreach ($item['dataTagihan'] as $itemTagihan)
<td class="month-col text-center">
@if ($itemTagihan['tanggal_lunas'] != '-')
{{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }}
@else
-
@endif
</td>
@endforeach
</tr>
@empty
<tr>
<td colspan="{{ count($header) + 3 }}" class="text-center fw-bold">
Tidak ada data
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- Tanda tangan bendahara -->
<div class="signature">
@include('components.informasi_pj')
</div>
<!-- Catatan footer yang terpisah -->
<div class="footer-note">
Dicetak pada: {{ CarbonCarbon::now()->format('d-m-Y H:i:s') }}
</div>
</div>
</div>
</div>
</div>
<script>
// Menambahkan data cetak tanggal ke body
document.body.setAttribute('data-print-date', new Date().toLocaleString());
</script>
@endsection
</code>
<code>@extends('layouts.app_niceadmin_blank') @section('content') <style> /* Styling untuk tampilan layar */ .table th, .table td { text-align: center; vertical-align: middle; } /* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */ .table th.no-col, .table td.no-col { width: 60px; } .table th.nisn-col, .table td.nisn-col { width: 100px; } .table th.nama-col, .table td.nama-col { width: 250px; } .table th.month-col, .table td.month-col { width: 90px; padding: 4px; } /* Styling khusus untuk mode cetak */ @media print { body { margin: 0; /* Pastikan tidak ada margin pada body */ padding: 0; /* Pastikan tidak ada padding pada body */ font-size: 12pt; color: black; /* Teks hitam */ } .table { border-collapse: collapse !important; /* Gabungkan border */ width: 100% !important; /* Pastikan tabel mengisi lebar penuh */ } th, td { border: 1px solid black !important; /* Border yang konsisten */ padding: 4px; background-color: white !important; /* Sel berwarna putih */ color: black !important; /* Teks hitam */ } tr { background-color: white !important; /* Semua baris putih */ } @page { size: 33cm 21.5cm; /* Ukuran F4 landscape */ margin: 1cm; /* Margin 1 cm */ } .signature { position: absolute; /* Posisi absolute untuk fleksibilitas */ bottom: 2cm; /* Jarak dari bawah */ right: 1cm; /* Posisi di kanan */ text-align: right; font-size: 12pt; width: 300px; } .footer-note { position: absolute; /* Posisi absolute */ bottom: 1cm; /* Posisi di kiri bawah */ left: 1cm; font-size: 10pt; width: auto; } body:after { content: "Dicetak pada: " attr(data-print-date); position: absolute; bottom: 1cm; left: 1cm; font-size: 10pt; display: none; /* Sembunyikan di halaman sebelumnya */ } @page:last { .signature { display: block; /* Tampilkan tanda tangan di halaman terakhir */ } .footer-note { display: block; /* Tampilkan catatan di halaman terakhir */ } body:after { display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */ } } } </style> <div class="row justify-content-center pr-0"> <div class="col-md-12"> <div class="card"> <div class="card-body"> @include('kepala_sekolah.laporan_header') <h4 class="my-0 py-0">LAPORAN REKAP PEMBAYARAN</h4> <div class="my-2">{!! $subtitle !!}</div> <div class="table-responsive"> <table class="table table-striped" style="border-collapse: collapse; width: 100%;"> <thead class="{{ config('app.thead_style') }}"> <tr> <th class="no-col">No</th> <th class="nisn-col">NISN</th> <th class="nama-col">Nama</th> @foreach ($header as $bulan) <th class="month-col"> {{ ubahNamaBulan($bulan) }} </th> @endforeach </tr> </thead> <tbody> @php $totalItems = 0; // Inisialisasi totalItems @endphp @forelse ($dataRekap as $item) <tr> <td class="no-col">{{ ++$totalItems }}</td> <!-- Menggunakan totalItems untuk penomoran --> <td class="nisn-col">{{ $item['siswa']['nisn'] }}</td> <td class="nama-col text-start">{{ $item['siswa']['nama'] }}</td> @foreach ($item['dataTagihan'] as $itemTagihan) <td class="month-col text-center"> @if ($itemTagihan['tanggal_lunas'] != '-') {{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }} @else - @endif </td> @endforeach </tr> @empty <tr> <td colspan="{{ count($header) + 3 }}" class="text-center fw-bold"> Tidak ada data </td> </tr> @endforelse </tbody> </table> </div> <!-- Tanda tangan bendahara --> <div class="signature"> @include('components.informasi_pj') </div> <!-- Catatan footer yang terpisah --> <div class="footer-note"> Dicetak pada: {{ CarbonCarbon::now()->format('d-m-Y H:i:s') }} </div> </div> </div> </div> </div> <script> // Menambahkan data cetak tanggal ke body document.body.setAttribute('data-print-date', new Date().toLocaleString()); </script> @endsection </code>
@extends('layouts.app_niceadmin_blank')

@section('content')
    <style>
        /* Styling untuk tampilan layar */
        .table th, .table td {
            text-align: center;
            vertical-align: middle;
        }

        /* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */
        .table th.no-col, .table td.no-col {
            width: 60px;
        }

        .table th.nisn-col, .table td.nisn-col {
            width: 100px;
        }

        .table th.nama-col, .table td.nama-col {
            width: 250px;
        }

        .table th.month-col, .table td.month-col {
            width: 90px;
            padding: 4px;
        }

        /* Styling khusus untuk mode cetak */
        @media print {
            body {
                margin: 0; /* Pastikan tidak ada margin pada body */
                padding: 0; /* Pastikan tidak ada padding pada body */
                font-size: 12pt;
                color: black; /* Teks hitam */
            }

            .table {
                border-collapse: collapse !important; /* Gabungkan border */
                width: 100% !important; /* Pastikan tabel mengisi lebar penuh */
            }

            th, td {
                border: 1px solid black !important; /* Border yang konsisten */
                padding: 4px;
                background-color: white !important; /* Sel berwarna putih */
                color: black !important; /* Teks hitam */
            }

            tr {
                background-color: white !important; /* Semua baris putih */
            }

            @page {
                size: 33cm 21.5cm; /* Ukuran F4 landscape */
                margin: 1cm; /* Margin 1 cm */
            }

            .signature {
                position: absolute; /* Posisi absolute untuk fleksibilitas */
                bottom: 2cm; /* Jarak dari bawah */
                right: 1cm; /* Posisi di kanan */
                text-align: right;
                font-size: 12pt;
                width: 300px;
            }

            .footer-note {
                position: absolute; /* Posisi absolute */
                bottom: 1cm; /* Posisi di kiri bawah */
                left: 1cm;
                font-size: 10pt;
                width: auto;
            }

            body:after {
                content: "Dicetak pada: " attr(data-print-date);
                position: absolute;
                bottom: 1cm;
                left: 1cm;
                font-size: 10pt;
                display: none; /* Sembunyikan di halaman sebelumnya */
            }

            @page:last {
                .signature {
                    display: block; /* Tampilkan tanda tangan di halaman terakhir */
                }

                .footer-note {
                    display: block; /* Tampilkan catatan di halaman terakhir */
                }

                body:after {
                    display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */
                }
            }
        }
    </style>
    <div class="row justify-content-center pr-0">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    @include('kepala_sekolah.laporan_header')
                    <h4 class="my-0 py-0">LAPORAN REKAP PEMBAYARAN</h4>
                    <div class="my-2">{!! $subtitle !!}</div>
                    <div class="table-responsive">
                        <table class="table table-striped" style="border-collapse: collapse; width: 100%;">
                            <thead class="{{ config('app.thead_style') }}">
                                <tr>
                                    <th class="no-col">No</th>
                                    <th class="nisn-col">NISN</th>
                                    <th class="nama-col">Nama</th>
                                    @foreach ($header as $bulan)
                                        <th class="month-col">
                                            {{ ubahNamaBulan($bulan) }}
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $totalItems = 0; // Inisialisasi totalItems
                                @endphp
                                @forelse ($dataRekap as $item)
                                    <tr>
                                        <td class="no-col">{{ ++$totalItems }}</td> <!-- Menggunakan totalItems untuk penomoran -->
                                        <td class="nisn-col">{{ $item['siswa']['nisn'] }}</td>
                                        <td class="nama-col text-start">{{ $item['siswa']['nama'] }}</td>
                                        @foreach ($item['dataTagihan'] as $itemTagihan)
                                            <td class="month-col text-center">
                                                @if ($itemTagihan['tanggal_lunas'] != '-')
                                                    {{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }}
                                                @else
                                                    - 
                                                @endif
                                            </td>
                                        @endforeach
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ count($header) + 3 }}" class="text-center fw-bold">
                                            Tidak ada data
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <!-- Tanda tangan bendahara -->
                    <div class="signature">
                        @include('components.informasi_pj')
                    </div>
                    <!-- Catatan footer yang terpisah -->
                    <div class="footer-note">
                        Dicetak pada: {{ CarbonCarbon::now()->format('d-m-Y H:i:s') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Menambahkan data cetak tanggal ke body
        document.body.setAttribute('data-print-date', new Date().toLocaleString());
    </script>
@endsection
  • Maintain zigzag color table layout on web page display.
  • The color of the table on the printed page is all white (there are no crossing colors between white and others in each cell).
  • The table can fill a full F4 landscape printed page.
  • The signature follows the end of the table by leaving sufficient distance so that it is neat. Even if, for example, on the last page, the table only fills half the paper, create a way for the signature to follow the end of the table.
  • ‘Dicetak pada’ is applied on the last page to replace the URL.

New contributor

Adam Fakhrul Rozi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật