rendering column header bug

t0n1zz

so i have a table with a lot of column (approx more than 30) and i am using scrollx and scrolly option in javascript so it can show all column but with slider....

but recently in google chrome i got this weird render in column header, at first i think it only happen in my computer but now i tried it in other computer with google chrome it show the same.... so how to fix it? since most people now using google chrome...

update:
so after investigating it... the rendering problem only occured when i have table with colspan and rowspan header... like this

<table class="table table-hover table-bordered" id="dataTables-all" width="100%" > 
    <thead class="bg-light-blue-active color-palette">
        <tr>
            <th rowspan="2" data-sortable="false" >#</th>
            <th rowspan="2" hidden></th>
            <th rowspan="2" hidden></th>
            <th rowspan="2" hidden></th>
            <th rowspan="2">Credit Union</th>
            <th rowspan="2">No.Ba</th>
            <th rowspan="2">District Office</th>
            <th rowspan="2">Wilayah</th>
            <th rowspan="2">Periode Laporan</th>
            <th colspan="5" class="text-center">Anggota</th>
            <th rowspan="2">ASET</th>
            <th rowspan="2">Aktiva LANCAR</th>
            <th rowspan="2">Simpanan Saham(SP+SW)</th>
            <th colspan="2" class="text-center">Simpanan Non Saham</th>
            <th rowspan="2">Hutang SPD</th>
            <th colspan="2" class="text-center">Piutang</th>
            <th colspan="2" class="text-center">Piutang Lalai</th>
            <th colspan="2" class="text-center">Rasio Piutang</th>
            <th rowspan="2">DCR</th>
            <th rowspan="2">DCU</th>
            <th colspan="2" class="text-center">Total</th>
            <th rowspan="2">SHU</th>
            <th rowspan="2">Tgl. Terima</th>
            <th rowspan="2">Tgl. Ubah</th>
        </tr>
        <tr>
            <th>Lelaki Biasa</th>
            <th>Lelaki L.Biasa</th>
            <th>Perempuan Biasa</th>
            <th>Perempuan L.Biasa</th>
            <th>Total</th>
            <th>Unggulan</th>
            <th>Harian & Deposito</th>
            <th>Beredar</th>
            <th>Bersih</th>
            <th> 1-12 Bulan</th>
            <th> > 12 Bulan</th>
            <th>Beredar</th>
            <th>Lalai</th>
            <th>Pendapatan</th>
            <th>Biaya</th>
        </tr>
    </thead>
    <tbody>
        // body
    </tbody>
</table>

and after i remove all colspan and rowspan and just making it into a simple on row header all problem gone

<table class="table table-hover table-bordered" id="dataTables-all" width="100%" > 
    <thead class="bg-light-blue-active color-palette">
        <tr>
            <th data-sortable="false" >#</th>
            <th hidden></th>
            <th hidden></th>
            <th hidden></th>
            <th>Credit Union</th>
            <th>No.Ba</th>
            <th>District Office</th>
            <th>Wilayah</th>
            <th>Periode Laporan</th>
            <th>Anggota Lelaki Biasa</th>
            <th>Anggota Lelaki L.Biasa</th>
            <th>Anggota Perempuan Biasa</th>
            <th>Anggota Perempuan L.Biasa</th>
            <th>Total Anggota</th>
            <th>ASET</th>
            <th>Aktiva LANCAR</th>
            <th>Simpanan Saham(SP+SW)</th>
            <th>Simpanan Non-Saham Unggulan</th>
            <th>Simpanan Non-Saham Harian & Deposito</th>
            <th>Hutang SPD</th>
            <th>Piutang Beredar</th>
            <th>Piutang Bersih</th>
            <th>Piutang Lalai 1-12 Bulan</th>
            <th>Piutang Lalai > 12 Bulan</th>
            <th>Rasio Piutang Beredar</th>
            <th>Rasio Piutang Lalai</th>
            <th>DCR</th>
            <th>DCU</th>
            <th>Total Pendapatan</th>
            <th>Total Biaya</th>
            <th>SHU</th>
            <th>Tgl. Terima</th>
            <th>Tgl. Ubah</th>
        </tr>
    </thead>
    <tbody>
        // body
    </tbody>
</table>

and in this table i am using bootstrap 3 styling that come with datatables download.. so is it datatables javascript fault or maybe bootstrap 3 css styling fault?

so maybe someone know a workaround to show my column header with a more complex format with colspan and rowspan without this weird white blocks blocking my column header