Column size % different behaviour chrome/firefox and screensize

arstoaeinsa48

Sorry for the cryptic question, it's a bit hard to explain, but opening the JSfiddle in FF and in chrome should make the problem obvious.

The %width columns are behaving in a way which I don't follow at all. Chrome does a predictable job at large screen modes, but messes up at smaller screens. Firefox seems to add the padding AFTER setting the unpadded column as the width percentage, resulting in wider than expected columns.

Column percentages:
0 - NOT SET
1 - 10
2 - 10
3 - 10
4 - NOT SET
5 - 5
6 - 5
7 - 5
8 - 5
9 - 5
10 - 5
11 - 5
You'd expect the NOT SET columns sum to 35%, but in FF they're completely reduced.
You'd expect the second (1) column to be 111px wide (total is 1115px), which is the case in chrome (111px) but not in FF (111 + (2x18) = 147 px). However, at the small screens, chrome just drops some columns . Does anybody know how to solve these problems?
All I want is my columns to be a standard percentage of the page width, with similair behaviour in all browsers.

Picture of chrome/FF large and small screens: https://imgur.com/a/1UylQ

JSfiddle: https://jsfiddle.net/4mtz00s4/6/

kthorngren

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

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

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

Kevin

arstoaeinsa48

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

which is full circle I guess

kthorngren

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

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

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

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/