Thead Fixed Position - 2

<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.

Last Row in Foreach Data

Untuk memilih baris terakhir di dalam perulangan, contohnya menggunakan foreach pada Code Igniter, caranya adalah sebagai berikut:

$numItems = count($arr); $i = 0;

foreach($arr as $key=>$value) { 

    if(++$i === $numItems) { 

        echo "last index!"; 

    } 

}

atau

$last_key = end(array_keys($array)); 

foreach ($array as $key => $value) {

    if ($key == $last_key) { 

        // last element 

    } else {

         // not last element 

    } 

}

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Thead Fixed Position

Tabel yang isinya banyak tentunya semakin ke bawah (scroll) judul masing-masing kolom akan tertutup. Berikut trik css supaya judul kolom atau thead selalu tampil walaupun scroll sepanjang mungkin:


<style type="text/css">
    #afika.affix {
        position: fixed;
        top: 51px;
        width: 95.3%;
        background-color: #fff;
        box-shadow: 0 8px 4px -2px #888888;
        -moz-box-shadow: 0 8px 4px -2px #888888;
        -webkit-box-shadow: 0 8px 4px -2px #888888;
    }
</style>


<table width="100%" cellpadding="5" cellspacing="0">
            <thead id="fixed">
                <tr>
                    <th width="3%">No</th>
                    <th width="97%">Keterangan</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
</table>


<script type="text/javascript">
    $('#fixed').affix({
        offset: {
            top: $('header').height()
        }
    });
</script>


Atau


<div class="fixed">
<table>
    <thead>
    <tr><th>th1</th><th>th2</th><th>th3</th></tr>
    </thead>
</table>
</div>
<div>
<table>
    <thead>
    <tr><th>th1</th><th>th2</th><th>th3</th></tr>
    </thead>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
    <tr><td>td content</td><td>td content</td><td>td content</td></tr>
</table>
</div>

<style type="type/css">
.fixed{
    position: fixed;
    top: 0;
    z-index: 0;
}

th,td{
    width: 200px;
    padding: 3px;
}

th{
    background: #ccc;
}
</style>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Select Last Row with CSS in Table Body

SELECT LAST ROW

Tabel tidak selalu menggunakan bordering, misalnya saja acak atau menghilangkan border top/bottom di beberapa barisnya untuk suatu kondisi tertentu. Sehingga, memungkinkan baris paling bawah tidak mempunyai border. Solusinya adalah menambah border untuk baris paling bawah atau 4 baris paling bawah sesuai kondisi data anda. Berikut contoh yang saya berikan:

<table border="1" width="100%" id="test">
<tbody>
<tr>
<td>
<table border="1" width="100%">
<tbody>
<tr>
<td>table 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>
</tbody>
</table>

//Select last row
<style type="text/css">
#test>tbody>tr:last-child td { background:#ff0000; }

</style>

atau

tr:nth-last-child(1){
//declarations
}

atau

Element terakhir dari sebuah induk
p:nth-last-child(1) {
//declarations
}

//Select 4 baris terakhir
li:nth-last-child(-n+4) {
//declarations
}

//selain baris terakhir
tr:not(:last-child) {

border-bottom: 1px solid #E3E3E3;

}

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.