Datatable columns width

いくつかの行と列でデータテーブルを設定しましたが、「Tel。1、Tel。2 and Fecha」の列を少し広くして、単線。私はsの幅、およびdatatable jsのcolumnsdefプロパティをchagingしようとしましたが、動作しません。Datatable columns width

<html> 

<head> 

    <!DOCTYPE html> 

    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script> 
    <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script> 
    <script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"> 
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"> 
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"> 
    <link rel="icon" href="./resources/logo.jpg"> 
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"> 




<script> 


    $(document).ready(function() { 


     var oTable = $('#maintable').dataTable({ 

      "aoColumnDefs": [ 
       { "bSortable": false, "aTargets": [ 0 ] } 
      ], 
      "aaSorting": [[1, 'asc']], 
      "scrollY": 500, 
      "scrollX": true, 
      "bAutoWidth": false, 
      "aoColumns" : [ 
       { sWidth: '10px' }, 
       { sWidth: '100px' }, 
       { sWidth: '120px' }, 
       { sWidth: '30px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' }, 
       { sWidth: '120px' } 
      ], 



      "language": { 
       "lengthMenu": "Mostrar _MENU_ datos por pagina.", 
       "zeroRecords": "Nada fue encontrado.", 
       "info": "Mostrando _PAGE_ de _PAGES_", 
       "infoEmpty": "No hay datos disponibles", 
       "infoFiltered": "(filtrado de _MAX_ datos totales)", 
       "search": "Buscar:", 
       "paginate": { 
        "first":  "Primero", 
        "last":  "Ultimo", 
        "next":  "Proximo", 
        "previous": "Previo" 
       } 
      } 


     }); 



    }); 


</script> 




    <title>Consulta de facturas atrasadas</title> 

    <style type="text/css"> 
     html, #page { padding:0; margin:0;} 
     body { margin:0; padding:0; width:100%; color:#959595; font:normal 12px/2.0em Sans-Serif;} 
     h1, h2, h3, h4, h5, h6 {color:darkblue; text-align: center;} 

     #page { background:#fff;} 
     #header, #footer{ margin:0; padding:0;} 


     #logo { padding:0; width:auto; text-align: center; margin: auto;} 

     #header { background:#fff; } 
     #header-inner { margin:0 auto; padding:0;} 


     #footerblurb { background:#d3d3f9;color:blue; width: 100%;}  

     #footer { background:#fff; width: 100%;} 
     #footer-inner { margin:auto; text-align:center; padding:12px;} 
     #footer a {color:blue;text-decoration:none;} 

     #maintable { 

      text-align: center;    
      overflow: auto; 
     } 

     #events { 
      margin-bottom: 1em; 
      padding: 1em; 
      background-color: #f6f6f6; 
      border: 1px solid #999; 
      border-radius: 3px; 
      height: 100px; 
      overflow: auto; 
     } 

     td.highlight { 
      background-color: whitesmoke !important; 
     } 


     #container { 

      width:90%; 
      margin: 0 auto; 

     } 

     #titulo { 

      margin: 0 auto; 

     } 


     div.slider { 
      display: none; 
     } 

     table.dataTable tbody td.no-padding { 
      padding: 0; 
     } 


     .bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; } 




     .clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;} 

    </style> 

</head> 

<body> 

     <br> 
    <div id="page"> 
     <header id="header"> 
      <div id="header-inner"> 
       <div id="logo"> 

       </div> 

       <div id="titulo"> 

       </div> 

       <div class="clr"></div> 
      </div> 
     </header> 
     <br>  

    <div id="container"> 

     <table id="maintable" class="row-border hover order-column display" cellspacing="0" width="100%"> 
      <thead> 
       <tr style="text-align: center; color: black"> 

        <th>Codigo</th> 
        <th>Nombre</th> 
        <th>Propietario</th> 
        <th>Direccion</th> 
        <th>Ciudad</th> 
        <th>Sector</th> 
        <th>Cedula</th> 
        <th>Tel. 1</th> 
        <th>Tel. 2</th> 
        <th>Celular</th> 
        <th>Factura</th> 
        <th>Fecha</th> 
        <th>Dias</th> 
        <th>Monto</th> 
        <th>Pendiente</th> 
        <th>Vendedor</th> 

       </tr> 
      </thead> 


      <tbody> 

       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOSE HERNANDEZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2016-4-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOSE HERNANDEZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2016-4-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOSE HERNANDEZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2016-4-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOSE HERNANDEZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2016-4-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOSE HERNANDEZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2016-4-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 
       <tr> 

        <TD>02SA023</TD>  
        <TD>MOTO REPUESTOS A Y J</TD>         
        <TD>JOAN MANUEL RAMIREZ</TD>    
        <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>   
        <TD>SANTO DOMINGO</TD>      
        <TD>ENSANCHE QUISQUEYA</TD>    
        <TD>00114957335</TD>      
        <TD>829-433-5307</TD>  
        <TD>829-305-0426</TD>  
        <TD>7195918</TD> 
        <TD>1718</TD>   
        <TD>2015-12-18</TD> 
        <TD>104</TD>       
        <TD>9980.00</TD>   
        <TD>9980.00</TD>   
        <TD>Joan Ramirez</TD> 

       </tr> 

      </tbody> 

     </div>  


     </table>  

    </div>                  

    <div class="clr"></div> 




</body>

出典

2016-04-19 AdrianJG

トライ開始は、改行を防ぐ - > http://stackoverflow.com/questions/30535609/column-width-not-working-in-datatables-bootstrap – davidkonrad

ちょうどこのCSSを追加することにより、fixedにtable-layoutを変更してみてください：あなたが必要として

table.display { 
    table-layout: fixed;   
}

今すぐ新しい幅の値が適用されます、私はそれがあなたのために働く願って、おかげで。

詳細については、Table-Layout CSSプロパティを参照してください。

"aoColumnDefs": [ 
    { "bSortable": false, "aTargets": [ 0 ] }, 
    { "sWidth": "50px", "aTargets": [0,1,2,3,4,5,6,9,11,12,13,14,15] }, 
    //   ^Same width for all columns (excluding Tel.1, Tel.2 and Fecha). 
    { "sWidth": "80px", "aTargets": [7,8,10] }, 
    //   ^Width for 3 columns you want. 
],

あなたfinaly oTableコード：あなたのケースで

あなたが "bAutoWidth": falseを使用している、あなたはこのようにそれを行うことができます代わりに "aoColumns"を使用してあなたの方法で、すべての列を手動で幅を設定する必要があります次のようになります。

var oTable = $('#maintable').dataTable({ 
     "aoColumnDefs": [ 
      { "bSortable": false, "aTargets": [ 0 ] }, 
      { "sWidth": "50px", "aTargets": [0,1,2,3,4,5,6,9,11,12,13,14,15] }, 
      { "sWidth": "80px", "aTargets": [7,8,10] }, 
     ], 
     "aaSorting": [[1, 'asc']], 
     "scrollY": 500, 
     "scrollX": true, 
     "bAutoWidth": false, 

     "language": { 
      "lengthMenu": "Mostrar _MENU_ datos por pagina.", 
      "zeroRecords": "Nada fue encontrado.", 
      "info": "Mostrando _PAGE_ de _PAGES_", 
      "infoEmpty": "No hay datos disponibles", 
      "infoFiltered": "(filtrado de _MAX_ datos totales)", 
      "search": "Buscar:", 
      "paginate": { 
       "first":  "Primero", 
       "last":  "Ultimo", 
       "next":  "Proximo", 
       "previous": "Previo" 
      } 
     } 
    });

出典

2016-04-19 17:24:54

回答をお寄せいただきありがとうございますが、私は3つの列だけを編集し、他の列は同じままにしておきたいと思います。すべての列と見出しが一列に並んでいないので、サイズ。 – AdrianJG

気にしないで、私はそれを修正しました。ありがとう。 – AdrianJG

@AdrianGonzalezあなたは大歓迎です:)私は私の答えで提案を追加しました。 –

答えて

関連する問題