Szerokość kolumny nie działa w bootstrapach danych

Korzystam z poniższego kodu, aby ustawić szerokość kolumny datatable. Podczas częściowego ładowania strony szerokość wydaje się być poprawna, a po całkowitym załadowaniu szerokość jest wyłączona.Szerokość kolumny nie działa w bootstrapach danych

<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>

Tabela 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>

Źródło

2015-05-29 alicewilliam86

Jak wygląda twój znacznik? – davidkonrad

Używa funkcji autowidth i nie przyjmuje określonej szerokości. Tak więc niektóre kolumny są węższe, niż się spodziewam. – alicewilliam86

Tak, to jest to, co możemy zobaczyć w pytaniu - ale jak jest twój znacznik, struktura tabeli, i.e '

....' etc? – davidkonrad

Odpowiedz

Poniższa skryptu przy określaniu właściwości dataTable:

"kolumny": [ { "szerokość" "25 pikseli"}, { "szerokość" "25 pikseli"}, { „szerokość ":" 450px "}, {" width ":" 20px "}, {" width ":" 20px "}, {" width ":" 20px "}, {" width ":" 20px "} , {"szerokość": "20px"} ],

Źródło

2015-11-11 15:00:56 alicewilliam86

W moim przypadku musiałem dodać również "autoWidth: false". Powyżej nie działa tylko dla mnie. – hsnkhrmn

To jest dobra odpowiedź, ale działa tylko z DataTables v1.10 i nowszymi. Wydaje się, że pytanie OP używa v1.9. – Kidquick

Byłoby miło zobaczyć tabelę w działaniu, ale mam silne poczucie, że jest to czysta kwestia szerokości zawartości. Elementy z numerem display: table-cell będą próbowały się rozwinąć, aby pokazać jak najwięcej treści bez zawijania. Na przykład szerokość <th> z napisem "Ochrona podróży", którą definiujesz jako 10% - potrzebujesz raczej szerokiej tabeli, aby wyświetlić "Ochronę podróży" w granicach 10%.

więc uchylić domyślnego word-wrap i word-break ustawienia <th> tak:

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

rodzaj demo (jak powiedział, nie może dowód to do stolika IRL) ->http://jsfiddle.net/9vbz7thp/

najlepszą rzeczą byłoby dostosować zawartość <th>, aby pasowały do zakodowanych na stałe szerokości.

Jeśli jest treść <td> „s, która rośnie zbyt duży (zwykle nie loooong łamliwe słowo):

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

BTW: Nie trzeba zdefiniować jawnie wpisanej szerokości zarówno <th> i <td>” s. <td> automatycznie pobiera szerokość z odpowiadającego <th>.

Źródło

2015-06-02 17:21:38 davidkonrad

Twój stół nie oblewa się, gdy masz niezłamane słowo. Zobacz zaktualizowane skrzypce: http://jsfiddle.net/9vbz7thp/32/ – kimli

@kimli, to dlatego, że błędnie celujesz w 'table.dataTable thead tr td' w zaktualizowanym skrzypcach, oczywiście powinno to być' table.dataTable TBODY tr td '-> ** http: //jsfiddle.net/9vbz7thp/33/** to działa. – davidkonrad

Masz rację. Dzięki :) – kimli

Dla Auto Adjustment, Add to wyraźnie

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


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

Źródło

2016-01-27 08:36:06

Co to jest "MyItemst"? Nigdzie tego nie widzę w PO. – Tony

Podczas ustawiania szerokości kolumny, trzeba także ustawić:

autoWidth: false

... od samego DataTable

Źródło

2017-05-19 09:22:54 ozz

To rozwiązanie pomogło w rozwiązaniu problemu, w którym tabela o tej samej klasie kolumnowej ma inną szerokość po wywołaniu elementu dataTable. – Woody

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

    "autoWidth":false,

jest działa dla mnie

Źródło

2017-06-28 06:05:39

Powiązane problemy