Chiều rộng cột không hoạt động trong datatables bootstrap

Question

Tôi đang sử dụng mã sau đây để đặt chiều rộng cột của dữ liệu có thể đặt. Trong khi tải trang một phần chiều rộng có vẻ đúng và khi tải hoàn toàn, chiều rộng bị tắt.

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

Bảng 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>