scrollX and column width not behaving as expected

dataTablesUsername

I'm seeing some issues with scrollX and specifying widths on columns. I would expect that if you set scrollX to true and also specified column widths, the table would scroll horizontally if the container or view-port is smaller than the combined column widths.

However, what I'm seeing is that if the table is smaller than the specified column widths, dataTables keeps shrinking the columns and scrollX never seems to kick in. This looks awful and is unreadable.

I tried taking out width="100%" on the table, but that causes showing/hiding columns to not behave correctly if you only show 1 or 2 columns (or fewer columns than fill the container).

Here is the code I'm working with:

https://plnkr.co/edit/Sj3OhNNx3WyAqrSBiB3U?p=preview

There may be some css/html thing I'm missing here.

allan

You have:

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

in your CSS. Which means the browser can break the strings anywhere it wants. Moreover, the browser will do everything it can to shrink the table to 100% (or as small as possible, depending on the width attribute).

Normally what you would do is use table-layout: fixed; for a table if you want to explicitly set the column widths to an absolute value. However, for some reason that I am not seeing that isn't working with your table: https://plnkr.co/edit/3B8Dc1mxr5dden3la7EM?p=preview . It using the full width for some reason that I'm not seeing. I'll take a another poke at it later in the week.

Allan

dataTablesUsername

Allan, thanks so much for responding and looking at my code.

I updated your plunk with break-all removed: https://plnkr.co/edit/fCcAzCpz50PCjLtkz3AS?p=preview . I had to add scrollX and scrollY back in because the header needs to be readable when the user scrolls down. The table now looks fine until you hide columns. The columns don't fill the available space and aren't aligned with the header when you have fewer columns than will fill the space.

The only reason I put in fixed widths for the columns was because the columns weren't aligned with the headers in Safari 8, and because I don't want the columns to shift when I sort data (I'm using serverside sorting in my production table).

allan

The only reason I put in fixed widths for the columns was because the columns weren't aligned with the headers in Safari 8

Have you got an example of that? That shouldn't be happening!

Allan