Datatables - Setting column width

Question

I m trying to set up width of columns as shown below    var per page      table   data  per page          table   dataTable        aoColumnDefs              sWidth    100px    aTargets     1               sWidth    100px    aTargets     2               sWidth    100px    aTargets     3               sWidth    100px    aTargets     4               sWidth    100px    aTargets     5               sWidth    100px    aTargets     6               sWidth    100px    aTargets     7                 aoColumns               sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px               bJQueryUI  true      iDisplayLength  per page       fnDrawCallback   function  oSettings           if  oSettings  iDisplayLength    per page          return true       else             post   this  data  url     iDisplayLength  oSettings  iDisplayLength              done function data               if  data success                per page   oSettings  iDisplayLength                                     But resulting column width is not that i m trying to set  could you help me please   Update 1   I ve updated my initialization code as follows  but bumped into strange behavior on IE 9  Ie takes the longest field  devides it into lines   and takes it s length as default for all rows of this column      var per page      table   data  per page          table   dataTable       sScrollX   100        aoColumns              sWidth    15              sWidth    15              sWidth    15              sWidth    15              sWidth    15              sWidth    15              sWidth    15                bJQueryUI  true      iDisplayLength  per page       fnDrawCallback   function  oSettings           if  oSettings  iDisplayLength    per page          return true       else             post   this  data  url     iDisplayLength  oSettings  iDisplayLength              done function data               if  data success                per page   oSettings  iDisplayLength                                     Update 2 I ve updated code as shown below  the result in ie 9 is that the heading of the datatable is resized to new size  but the rest of the table is untouched by changes   see screenshot http   gyazo com 282967b051366b18634d4e778205c938 init code     var per page      table   data  per page      var datTable       table   dataTable       sScrollX   100        sScrollX   500px       aoColumnDefs                bSortable  false  aTargets    4  5 6                  sWidth   16    aTargets     1  2 3 4 5 6                 bJQueryUI  true      sAutoWidth  false      iDisplayLength  per page       fnDrawCallback   function  oSettings           if  oSettings  iDisplayLength    per page          return true       else             post   this  data  url     iDisplayLength  oSettings  iDisplayLength              done function data               if  data success                per page   oSettings  iDisplayLength                                     How can I fix this behavior

User · Answer

I set the column widths in the HTML markup like so:

    <thead>
        <tr>

            <th style='width: 5%;'>ProjectId</th>
            <th style='width: 15%;'>Title</th>
            <th style='width: 40%;'>Abstract</th>
            <th style='width: 20%;'>Keywords</th>
            <th style='width: 10%;'>PaperName</th>
            <th style='width: 10%;'>PaperURL</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="@item.ID">
                <td>@item.ProjectId</td>
                <td>@item.Title</td>
                <td>@item.Abstract</td>
                <td>@item.Keywords</td>
                <td>@item.PaperName</td>
                <td>@item.PaperURL</td>
            </tr>
        }
    </tbody>
</table>

User · Answer

If you ever need to set your datatable column s width using CSS ONLY  following css will help you  -   HTML   lt table class  table table-striped table-bordered table-hover table-checkable  id  datatable  gt       lt thead gt       lt tr role  row  class  heading  gt           lt th width  2   gt               lt label class  mt-checkbox mt-checkbox-single mt-checkbox-outline  gt                   lt input type  checkbox  class  group-checkable  data-set   sample 2  checkboxes    gt                   lt span gt  lt  span gt               lt  label gt           lt  th gt           lt th width    gt  Col 1  lt  th gt           lt th width    gt  Col 2  lt  th gt           lt th width    gt  Col 3  lt  th gt           lt th width    gt  Actions  lt  th gt       lt  tr gt       lt tr role  row  class  filter  gt           lt td gt   lt  td gt           lt td gt  lt input type  text  class  form-control form-filter input-sm  name  col 1  gt  lt  td gt           lt td gt  lt input type  text  class  form-control form-filter input-sm  name  col 2  gt  lt  td gt           lt td gt  lt input type  text  class  form-control form-filter input-sm  name  col 3  gt  lt  td gt           lt td gt               lt div class  margin-bottom-5  gt                   lt button class  btn btn-sm btn-success filter-submit margin-bottom  gt  lt i class  fa fa-search  gt  lt  i gt  Search lt  button gt               lt  div gt               lt button class  btn btn-sm btn-default filter-cancel  gt  lt i class  fa fa-times  gt  lt  i gt  Reset lt  button gt           lt  td gt       lt  tr gt       lt  thead gt       lt tbody gt   lt  tbody gt    lt  table gt    Using metronic admin theme and my table id is  datatable as above   CSS   datatable  gt  thead  gt  tr heading  gt  th nth-child 2    datatable  gt  thead  gt  tr heading  gt  th nth-child 3    width  120px  min-width  120px

User · Answer

for who still having issues with 1 9 4 change    oSettings aoColumns i  nTh style width    fnStringToCss oSettings aoColumns i  sWidth   oSettings aoColumns i  nTh style minWidth    fnStringToCss oSettings aoColumns i  sWidth

User · Answer

I have tried in many ways  The only way that worked for me was   The Yush0 CSS solution    yourTable      table-layout  fixed  important      word-wrap break-word      Together with Roy Jackson HTML Solution               lt th style  width  5    gt ProjectId lt  th gt       lt th style  width  15    gt Title lt  th gt       lt th style  width  40    gt Abstract lt  th gt       lt th style  width  20    gt Keywords lt  th gt       lt th style  width  10    gt PaperName lt  th gt       lt th style  width  10    gt PaperURL lt  th gt   lt  tr gt

User · Answer

You can define sScrollX    100   to force dataTables to keep the column widths        sScrollX   100       lt -- here  aoColumns              sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px             sWidth    100px                 you can play with this fiddle -  http   jsfiddle net vuAEx

User · Answer

I can tell you another simple way to fix the width of data table in html itself   use   lt colgroup gt       lt col width  3   gt       lt col width  3   gt   lt  colgroup gt    here is a sample code of data table below             lt table class  table datatable  gt                                   lt colgroup gt                                       lt col width  33   gt                                       lt col width  33   gt                                       lt col width  33   gt                                       lt col width  33   gt                                   lt  colgroup gt                                      lt thead gt                                           lt tr gt                                               lt th gt User Id lt  th gt                                               lt th gt Name lt  th gt                                               lt th gt Email lt  th gt                                               lt th gt Phone lt  th gt                                           lt  tr gt                                       lt  thead gt                                           lt tr gt                                               lt th gt alpha lt  th gt                                               lt th gt beta lt  th gt                                               lt th gt gama lt  th gt                                               lt th gt delta lt  th gt                                           lt  tr gt                                           lt tr gt                                               lt th gt alpha lt  th gt                                               lt th gt beta lt  th gt                                               lt th gt gama lt  th gt                                               lt th gt delta lt  th gt                                           lt  tr gt                                           lt tr gt                                               lt th gt alpha lt  th gt                                               lt th gt beta lt  th gt                                               lt th gt gama lt  th gt                                               lt th gt delta lt  th gt                                           lt  tr gt                               lt  table gt

User · Answer

you should use    bAutoWidth  property of datatable and give width to each td column in         table   dataTable   bAutoWidth   false    aoColumns              sWidth    15              sWidth    15              sWidth    15              sWidth    15              sWidth    15              sWidth    15              sWidth    10                 Hope this will help

User · Answer

This is the only way i could get it working   JS   columnDefs                   width    100px    targets    0                CSS    yourTable      table-layout  fixed  important      word-wrap break-word      The CSS part isn t nice but it does the job

User · Answer

My way to do it      table 1   DataTable       processing  true      serverSide  true      ajax   customer data       columns              data   id   name   id    width   50px   class   text-right               data   name   name   name  width   50px   class   text-right

User · Answer

I would suggest not using pixels for sWidth  instead use percentages  Like below       aoColumnDefs          sWidth    20     aTargets     0       lt - start from zero      sWidth    5     aTargets     1           sWidth    10     aTargets     2           sWidth    5     aTargets     3           sWidth    40     aTargets     4           sWidth    5     aTargets     5           sWidth    15     aTargets     6             aoColumns              sWidth    20              sWidth    5              sWidth    10              sWidth    5              sWidth    40              sWidth    5              sWidth    15                Hope it helps

User · Answer

I see in your Update 2 that you have use sAutoWidth  but I think you mistyped bAutoWidth  Try to change this    You can also add a CSS rule to  table if the problem persists   You should also be careful when the width of the content is greater than the header of the column   So something like the combination of the 1  amp  2       table   dataTable     bAutoWidth  false     aoColumns           sWidth   15            sWidth   15            sWidth   15            sWidth   15            sWidth   15            sWidth   15            sWidth   10

[javascript] Datatables - Setting column width

Examples related to javascript

Examples related to datatables

Examples related to jquery-datatables