Column width

ECEGROUPE

Hi,

Here is a test case to my problem : https://live.datatables.net/folicuwe/1/edit

I would like to set up my table where the first colum, take 400px and the second one take 50px. If data in the cell of the 2nd column overflow, i would like that there is "..." at the end of a data (text-overflow: ellipsis)

As you can see in my exemple, i have tryed to set up the width of the column but it seem that nothing work... Can you help me ?

Thank in advance for your answer,
Mathieu.

kthorngren

If you open the test case in a "Live Preview" window by clicking the up-right pointing arrow in the upper right of the Output tab you should see the Name column in close to 400px. The Position column is wider than 50px due to the Senior Marketing Designer data being wider. The width is set from that to keep the column widths from changing while paging. Allan has a detailed explanation of column widths in this thread.

Use the ellipsis plugin for the ellipsis display.

Kevin

ECEGROUPE

What do you mean by "The width is set from that to keep the column widths from changing while paging."

Because when i go to page 2, the width first column in not the same as in the page 1, that's what i m looking to fix.

I would like that the width of my first column, second column etc... stay the same on every pages.

kthorngren

What do you mean by "The width is set from that to keep the column widths from changing while paging."

If you open the "Live Preview" so the table is fits within the container the column widths are consistent page to page. However if the table is wider than the container the browser is adjusting the width as described by Allan in this thread.

The defined column widths are a "guide" to both DataTables and the browser - they are not considered to be absolute - if you want that, then you need to use table-layout: fixed in your CSS.

You can apply table-layout: fixed if you wish, for example:
https://live.datatables.net/beroqeke/1/edit

Kevin