Larghezza colonna non funzionante in bootstrap di datatables

Sto usando il seguente codice per impostare la larghezza della colonna di datatable. Durante il caricamento parziale della pagina, la larghezza sembra essere corretta e quando si carica completamente, la larghezza è disattivata.Larghezza colonna non funzionante in bootstrap di datatables

<script> 
    $(document).ready(function() { 
     $("#memberGrid").dataTable({ 
      "dom": 'T<"clear">lfrtip', 
      "tableTools": { 
       "sSwfPath": "../../Content/swf/copy_csv_xls.swf" 
      }, 
      "destroy": true, 
      "info": true, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bAutoWidth": false, 
      "aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }] 
     }); 
    }); 
</script>

Tabella Markup

<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid"> 
       <thead class="tablehead"> 
        <tr> 
         <th style="width: 20%">Name</th> 
         <th style="width: 20%">Room with</th> 
         <th style="width: 20%">Extensions</th> 
         <th style="width: 10%">Travel Protection</th> 
         <th style="width: 20%">Flying from</th> 
         <th style="width: 10%">Balance</th> 
        </tr> 
       </thead> 
       <tbody> 
      <tr class="tablerows"> 
       <td style="width: 20%"><%# Eval("Travelers") %></td> 
       <td style="width: 20%"><%# Eval("RoomMates")%></td> 
       <td style="width: 20%"><%# Eval("Extensions")%></td> 
       <td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td> 
       <td style="width: 20%"><%# Eval("Airport")%></td> 
       <td style="width: 10%">$<%# Eval("Balance")%></td> 
      </tr> 
      </tbody> 
        </table>

fonte

2015-05-29 alicewilliam86

Come è il tuo markup? – davidkonrad

Si utilizza l'incremento automatico e non prende la larghezza specificata. Quindi alcune colonne sono più strette di quanto mi aspetti. – alicewilliam86

Sì, questo è ciò che possiamo vedere nella domanda - ma come è il tuo markup, la struttura della tabella, i.e '

....' etc? – davidkonrad

risposta

utilizzare il seguente script al momento di definire le proprietà DataTable:

"colonne": [ { "larghezza": "25px"}, { "larghezza": "25px"}, { "width ":" 450px "}, {" larghezza ":" 20px "}, {" larghezza ":" 20px "}, {" larghezza ":" 20px "}, {" larghezza ":" 20px "} , {"larghezza": "20px"} ],

fonte

2015-11-11 15:00:56 alicewilliam86

Nel mio caso ho dovuto aggiungere anche "autoWidth: false". Soprattutto non ha funzionato per me – hsnkhrmn

Questa è una buona risposta, ma funzionerà solo con DataTables dalla v1.10 in su. La domanda dell'OP sembra usare la v1.9. – Kidquick

sarebbe bello vedere il vostro tavolo in azione, ma ottengo la forte sensazione che questa è una questione di pura larghezza del contenuto. Gli elementi con display: table-cell tenteranno di espandersi per mostrare quanto più possibile i contenuti senza il wrapping. Ad esempio, la larghezza dello <th> con la didascalia "Protezione viaggio", che viene definita come 10%, richiede una tabella piuttosto ampia per mostrare "Protezione viaggio" entro il 10%.

Quindi annullare il default word-wrap e word-break impostazioni per <th> come questo:

table.dataTable thead tr th { 
    word-wrap: break-word; 
    word-break: break-all; 
}

una sorta di demo (come ha detto, non può prova di questo al vostro tavolo IRL) ->http://jsfiddle.net/9vbz7thp/

La cosa migliore sarebbe quello di regolare il contenuto del <th> in modo che si adatta alle larghezze hardcoded.

Se è il contenuto dei <td> 's che cresce troppo grande (in genere una non parola frangibile moooolto):

table.dataTable tbody tr td { 
    word-wrap: break-word; 
    word-break: break-all; 
}

BTW: Non è necessario definire le larghezze hardcoded sia <th> e <td>' S. <td> ottiene automaticamente la larghezza dal corrispondente <th>.

fonte

2015-06-02 17:21:38 davidkonrad

La tabella non si avvolge quando si ha una parola non distruttiva. Vedi fiddle aggiornato: http://jsfiddle.net/9vbz7thp/32/ – kimli

@kimli, questo perché si targetizza erroneamente 'table.dataTable thead tr td' nel fiddle aggiornato, ovviamente quello dovrebbe essere' table.dataTable TBODY trtd '-> ** http: //jsfiddle.net/9vbz7thp/33/** quindi funziona. – davidkonrad

Hai ragione. Grazie :) – kimli

per la regolazione automatica, Aggiungere esplicitamente

var MyDatatable = $("#memberGrid").dataTable(); 


MyDatatable.columns.adjust().draw();

fonte

2016-01-27 08:36:06

Che cos'è "MyItemst"? Non lo vedo da nessuna parte nell'OP. – Tony

Quando si imposta colonne larghezze, è anche necessario impostare:

autoWidth: false

... sulla DataTable sé

fonte

2017-05-19 09:22:54 ozz

Questa soluzione ha aiutato con il mio problema in cui la tabella con la stessa classe di colonne riceve larghezza diversa quando DataTable viene attivato. – Woody

oTableDetails = $('#tblUserDetails').dataTable({ 

    "autoWidth":false,

è lavoro per me

fonte

2017-06-28 06:05:39

Problemi correlati