Menambahkan SCROLL pada tampilan tabel dengan div

 Untuk tabel yang banyak kolom, dibutuhkan scroll untuk melihat kolom yang tidak terlihat..

cukup menambahkan html div diatas tabel tersebut.

<div style="overflow-x:auto;">

<table class="table table-bordered"cellpadding=3 cellspacing=1 bgcolor=black width="100%" align=center>

 <tr bgcolor="#3399FF" align=center>

    <td align=center class="boardsection" width="1%" rowspan="3"><b>No</b></td>

    <td align=center class="boardsection" width="40%" rowspan="3"><b>Unit Kerja</b></td>

   

    <td align=center class="boardsection" width="5%" rowspan="3"><b>Eselon </b></td>  

    <td align=center class="boardsection" width="3%" rowspan="3"><b>Bezetting Pejabat Eselon</b></td>  

    <td align=center class="boardsection" width="3%" colspan="2"><b>Kebutuhan ASN</b></td>

    <td align=center class="boardsection" width="3%" colspan="2"><b>Bezetting ASN</b></td>  

    <td align=center class="boardsection" width="3%" rowspan="3"><b>Kekurangan/ Kelebihan</b></td>  

    <td align=center class="boardsection" width="3%" colspan="10"><b>PROYEKSI</b></td>

</tr>

<tr bgcolor="#3399FF" align=center>

    <td align=center class="boardsection" width="3%" rowspan="2"><b>Fungsional<br> Umum</b></td>

    <td align=center class="boardsection" width="3%" rowspan="2"><b>Fungsional <br>Khusus</b></td>

    <td align=center class="boardsection" width="3%" rowspan="2"><b>Fungsional<br> Umum</b></td>

    <td align=center class="boardsection" width="3%" rowspan="2"><b>Fungsional <br>Khusus</b></td>

    <td align=center class="boardsection" width="3%" colspan="5"><b>Pegawai yang akan Pensiun</b></td>

    <td align=center class="boardsection" width="3%" colspan="5"><b>Pegawai yang dibutuhkan</b></td>

</tr>

<tr bgcolor="#3399FF" align=center>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_1;?></b></td>  

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_2;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_3;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_4;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_5;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_1;?></b></td>  

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_2;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_3;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_4;?></b></td>

    <td align=center class="boardsection" width="3%" ><b><?php echo $tahun_5;?></b></td>

</tr>

<div>

Cara mengambil tanggal sekarang di javacript

 

<script>

        var d = new Date();

        var tglnow= d.getFullYear()+'-'+d.getMonth()+'-'+d.getDate();

        var t = new Date('2022-12-30');

        var tglyad= t.getFullYear()+'-'+t.getMonth()+'-'+t.getDate();

        var tglPertama  = Date.parse(tglyad);

        var tglKedua    = Date.parse(tglnow);

         var selisih     = (tglPertama - tglKedua) / miliday;  

                // alert(selisih);

                if (selisih<=0){  

                     return 'background-color:#FFD4D0;';  

                } else if ((selisih<15 && selisih>0 )){  

                     return 'background-color:#FCF9C1;';  

                }

                else if (selisih>=15){  

                     return 'background-color:#ECFBC8;';  

                }

</script>