Testing Cell Width

by ciaoben

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class=" scroll">
       
        <table class=" table  table-striped" id="header">
          </table>

       <!--    <div class="scroll">  -->

            <table class=" table  table-striped" id="datatable_pagament_invisibile">

                <thead class="">
                    <tr  role="row" id="">  
                        <th class=" ">Categoria</th> 
                        <th class=" ">Descrizione</th>
                        <th class=" ">Codice</th>  
                        <th class=" ">Stampa dati bancari</th> 
                        <th class=" ">Stampa dati cliente</th>
                        <th class=" ">I.V.A. prima rata</th> 
                        <th class=" ">D.F.F.M</th> 
                        <th class=" "> Numero di rate</th>
                        <th class=" "> Giorni aggiuntivi</th>
                        <th class=" "> 1° rata</th>
                        <th class=" "> 2° rata</th>
                        <th class=" "> 3° rata</th>
                        <th class=" "> Visibile</th>
                        <th class=" "> Periodo</th>
                    </tr>
                </thead>
        <tr><td value="1-1">3</td><td value="1-2">R.D. 90 giorni D.F.F.M.</td><td value="1-3">00001</td><td value="1-4">1</td><td value="1-5">0</td><td value="1-6">0</td><td value="1-7">1</td><td value="1-8">1</td><td value="1-9">0</td><td value="1-10">90</td><td value="1-11">0</td><td value="1-12">0</td><td value="1-13">1</td><td value="1-14">0</td></tr><tr><td value="2-1">2</td><td value="2-2">Ri.Ba. 30/60/90 giorni D.F.F.M.</td><td value="2-3">00002</td><td value="2-4">0</td><td value="2-5">1</td><td value="2-6">0</td><td value="2-7">1</td><td value="2-8">3</td><td value="2-9">0</td><td value="2-10">30</td><td value="2-11">60</td><td value="2-12">90</td><td value="2-13">1</td><td value="2-14">0</td></tr><tr><td value="3-1">2</td><td...

CSS

.bis {
    
    
    display:block;  
   //overflow-x: scroll;
    
}


#header {
    position: relative;
    top: 0;
    
}
#header th{
   
   
    vertical-align:middle;
    background-color: white;
    

}

.scroll  {
    
  overflow-y:scroll;
  height:500px; 
  position: relative;
   
   
}



#header thead {
    
    position: absolute;
}

JavaScript

Clone('datatable_pagament_invisibile', 'header');
resizeCol(14,'datatable_pagament_invisibile', 'header');

 $(".scroll").scroll(function(){
       $("#header thead").css({"top": ($(".scroll").scrollTop()) + "px"});
    
          });

function resizeCol(numerocolonne, idtabella, iddestinazione){
    //$('#datatable_pagament_invisibile thead').clone().appendTo('#header');
    var $headers = $('#'+idtabella+' th');
    
    $headers.each(function(index, el) {
        $('#'+iddestinazione).width($('#'+idtabella).width());
        $('#header thead th').height($('#datatable_pagament_invisibile thead').height());
        $('#'+iddestinazione+' th').eq($headers.index(this)).width($('#'+idtabella+' td:nth-child('+(index+1)+')').width());
        console.log(index);
        console.log($('#'+idtabella+' td:nth-child('+index+')').width());
    });
}
function Clone(idtabella,iddestinazione){
    
    $('#'+idtabella+' thead').clone().appendTo('#'+iddestinazione);
}