कॉलम चौड़ाई डेटाटेबल्स बूटस्ट्रैप

Question

में काम नहीं कर रहा है मैं डेटाटेबल की कॉलम चौड़ाई सेट करने के लिए निम्न कोड का उपयोग कर रहा हूं। आंशिक पृष्ठ लोड के दौरान चौड़ाई सही प्रतीत होती है और जब यह पूरी तरह से लोड हो जाती है, तो चौड़ाई बंद होती है।

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

तालिका मार्कअप

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

Answer 1

जब datatable गुण को परिभाषित निम्न स्क्रिप्ट का उपयोग करें:

"कॉलम": [ { "चौड़ाई": "25px"}, { "चौड़ाई": "25px"}, { "चौड़ाई ":" 450 पीएक्स "}, {" चौड़ाई ":" 20 पीएक्स "}, {" चौड़ाई ":" 20 पीएक्स "}, {" चौड़ाई ":" 20 पीएक्स "}, {" चौड़ाई ":" 20 पीएक्स "} , {"चौड़ाई": "20 पीएक्स"} ],

Answer 2

कार्रवाई में अपनी मेज को देखने के लिए अच्छा नहीं होगा, लेकिन मैं एक मजबूत लग रहा है कि इस सामग्री की चौड़ाई का एक शुद्ध बात है मिलता है। display: table-cell के साथ तत्वों को लपेटने के बिना जितना संभव हो उतना सामग्री दिखाने के लिए विस्तार करने का प्रयास करेगा। उदाहरण के लिए, <th> की चौड़ाई जिसमें कैप्शन "ट्रैवल प्रोटेक्शन" है, जिसे आप 10% के रूप में परिभाषित करते हैं - आपको 10% के भीतर "ट्रैवल प्रोटेक्शन" दिखाने के लिए एक विस्तृत तालिका की आवश्यकता होगी।

तो इस तरह <th> के लिए word-wrap और word-break सेटिंग्स डिफ़ॉल्ट को खारिज किया:

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

डेमो का एक प्रकार है (जैसा कि कहा, अपनी मेज IRL को यह प्रमाण नहीं कर सकते हैं) ->http://jsfiddle.net/9vbz7thp/

सबसे अच्छी बात <th> की सामग्री को समायोजित करना होगा ताकि वे हार्डकोडेड चौड़ाई के साथ फिट हो जाएं।

यह है कि बहुत बड़ी बढ़ता है (आम तौर पर एक loooong नहीं भंगुर शब्द):

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

Btw: आप दोनों <th> और <td> में हार्डकोडेड चौड़ाई को परिभाषित करने की जरूरत नहीं है '<td> की सामग्री है रों। <td> स्वचालित रूप से संबंधित <th> से चौड़ाई प्राप्त करता है।

Answer 3

ऑटो समायोजन के लिए, इस जोड़े को स्पष्ट रूप से

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


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

Answer 4

जब स्तंभों की चौड़ाई की स्थापना, आप भी निर्धारित करने की आवश्यकता:

autoWidth: false 

...

Answer 5

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

    "autoWidth":false, 

है DataTable पर ही मेरे लिए काम कर रहे हैं