Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2017

  Not sure if this resolves your issues but removing:

  table {
    table-layout: fixed;
  }
  
  

  Seems to solve the issue of Chrome dropping columns. As a general rule it is suggested to use width="100%" in the table tag.

  Kevin
• arstoaeinsa48 Posts: 5Questions: 1Answers: 0

  December 2017

  It solves the column dropping, but as a result the overflows aren't working anymore. Also, the column width don't seem to be changing, so this is not the right solution sadly .

  Thanks for the asnwer anyways!
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2017

  Does this thread help?
  https://datatables.net/forums/discussion/comment/103241/#Comment_103241

  Kevin
• arstoaeinsa48 Posts: 5Questions: 1Answers: 0

  December 2017 edited December 2017

  The solution of that guys' problem was... table-layout:fixed

  which is full circle I guess
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2017

  The solution of that guys' problem was... table-layout:fixed

  In addition to that the person used this code:

            render:function(data,type,row) {
                return "<div class=my_elipsis>" + data.Name + "</div>"}
            },
  

  to wrap each cell in a DIV to apply the CSS. Maybe I missed it in your example but did you try this?

  I tried it here:
  http://live.datatables.net/bohawuza/1/edit

  Kevin
• arstoaeinsa48 Posts: 5Questions: 1Answers: 0

  December 2017

  Thanks for all your help Kevin, I really appreciate it!

  I've checked your example, but all the columns are the same size now (both in firefox and chrome). I really feel like I'm missing something obvious, because it seems like fairly trivial functionality

  I've updated the fiddle to show the comparison between sizes in % and in px
  https://jsfiddle.net/4mtz00s4/18/

  The sizes in px behave identical in firefox and chrome.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2017 edited December 2017

  I realized I made a mistake with my example. I defined columnDefs twice, the column widths first then the render code. The column widths was overwritten. I combined them into one colunmDefs object and it looks like it might be closer:

  http://live.datatables.net/bohawuza/2/edit

  Looks like it still looses the salary columns when the page is small.

  Kevin
• arstoaeinsa48 Posts: 5Questions: 1Answers: 0

  December 2017

  I found a hacky solution, which seems to solve all my problems in all the browsers at all the sizes. I overwrote the CSS settings from datatable's css, and set the padding to 0.

  table.dataTable thead th,
  table.dataTable thead td {
    padding: 10px 0px;
    border-bottom: 1px solid #111;
  }
  
  table.dataTable.compact thead th,
  table.dataTable.compact thead td {
    padding: 10px 0px;
  }
  

  I'm going with this solution for now, except if you guys know anything better.

  I'm still not really sure whats the underlying cause is of this behaviour, and I hope that somebody can shed some light on it

  Cheers

  Final (?) fiddle: https://jsfiddle.net/4mtz00s4/20/