<style type="text/css">
h1,h2,h3,h4,h5,h6{line-height: 1;}
.clearHeader{
display: none;
}
.darkHeader {
height: 30px;
background-color: #fff;
position: fixed;
top:50px;
width: 94%;
box-shadow: 0 8px 4px -2px #888888;
-moz-box-shadow: 0 8px 4px -2px #888888;
-webkit-box-shadow: 0 8px 4px -2px #888888;
}
.wrapper {
height:auto;
}
</style>
<script type="text/javascript">
function printDiv(elementId) {
var a = document.getElementById('printing-oop').value;
var b = document.getElementById(elementId).innerHTML;
window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
<div id="print-area">
<div class="table-responsive">
<div class="clearHeader">
<table id="maintable" width="100%" class="table table-hover table-bordered" border="1" style="font-size:11px;" cellpadding="2" cellspacing="0">
<thead style="font-weight: bold; font-size: 11px">
<tr>
<th id="no" width="3%" style="text-align: center; vertical-align: middle;font-size:11px;">No</th>
<th id="prog" width="38%" style="text-align: center; vertical-align: middle;font-size:11px;">NAMA PROGRAM DAN KEGIATAN</th>
<th id="ang" width="17%" style="text-align: center; vertical-align: middle;font-size:11px;">ANGGARAN (Rp.)</th>
<th id="kel" width="25%" style="text-align: center; vertical-align: middle;font-size:11px;">KELUARAN KEGIATAN</th>
<th id="vol" width="10%" style="text-align: center; vertical-align: middle;font-size:11px;">VOLUME</th>
<th id="ket" width="7%" style="text-align: center; vertical-align: middle;font-size:11px;">KET</th>
</tr>
</thead>
</table>
</div>
<div class="wrapper">
<p style="font-size:15px;"><b>IV. Program dan Kegiatan yang dilaksanakan Tahun Anggaran <?php echo $tahun ?> :</b></p>
<table id="maintable" width="100%" class="" border="1" style="" cellpadding="2" cellspacing="0">
<thead style="">
<tr>
<th id="no" width="3%" style="">No</th>
<th id="prog" width="38%" style="">NAMA PROGRAM DAN KEGIATAN</th>
<th id="ang" width="17%" style="">ANGGARAN (Rp.)</th>
<th id="kel" width="25%" style="">KELUARAN KEGIATAN</th>
<th id="vol" width="10%" style="">VOLUME</th>
<th id="ket" width="7%" style="">KET</th>
</tr>
</thead>
<tbody id="content">
</tbody>
</table>
</div>
</div>
<textarea id="printing-oop" style="display:none;">
@media print {
@page {size: legal portrait; margin-left: 2.25cm; margin-bottom: 5cm; margin-top: 2cm; margin-right: 2cm}
table{
line-height: 20px;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table td,
.table th {
border: 1px solid #000 !important;
}
.clearHeader{
display: none;
}
}
</textarea>
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function () {
var header = $(".clearHeader");
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 150) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
</script>
</div>
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.