scrollx and width of header/columns (pb with edge)

tschmit

I try to use bootsrap (3.3.7) with datatables (1.10.16) with the scrollX feature.

All seems fine with IE11, Firefox, Opera but not with Edge.

Please consider the following illustration link

You should see:

I can fix it by using nowrap in my table tag, but then I'll loose the width of the column.

Any help greatly appreciated.

allan

Edge appears to be really aggressive in its breaking on hyphens. It is trying to shrink the table down to the smallest possible size, which is where the misalignment is coming from here.

There doesn't appear to be a CSS way to tell it not to break on hyphens, but you could try replacing the standard hyphen with a non-breaking hyphen. In your renderDate function use:

function renderDate(data, type, full, meta) {
    return jsonDateToString(data).replace( /\-/g, '‑' );
}

Let us know how that goes if you would.

Another option would be to add nowrap to just the date (and Client reference) columns.

Allan

tschmit

I tried for hyphens (actually on line) but this does not solve the problem. As far a I understand it:

• the width constraints from columns are not applied
• the Title column is too large

What confuse me the most is that with F12, the widths of head and body are identical but not rendered the same

allan

The columns.width value is a guideline only. Unless you use table-layout: fixed the browser can overrule you (that's the browser, not so much DataTables). Specifically that will happen if the content for the cell doesn't fit into the width specified. The different browsers have different ways of handling that fall back and this is easily the most complex part of DataTables!

I'm out of time today I'm afraid, but I'll take a look at it tomorrow again if I can.

Allan