columnDefs width not working for me

carslf

Hey, I've been trying to set some static widths for two of the columns in my DataTable. The rest are just to fill in automatically in whatever space is left. But you can see here in my CodePen that it's just not working:

http://codepen.io/anon/pen/rLEkLR

The columns I'm attempting to restrict are the ones labeled "Course 1" and "Course 2"

The relevant code that I'm trying to do this with is this:

            "columnDefs": [
                {
                    "targets": [ -1 ],
                    "responsivePriority": 1
                },
                {
                    "targets": [ 1 ],
                    "responsivePriority": 0
                },
                {
                    "targets": [ -2, -3 ],
                    "responsivePriority": 2,
                    "width":"20px",
                },
                {
                    "targets": [ 0 ],
                    "visible": false,
                }
            ],

allan

The content in the last two columns in the table is much wider than 20px. BUILDING CONSTRUCTION TRADES PM Full Year and EMERGENCY MEDICAL TECHNICIAN (EMT) AM SPRING for example.

So DataTables does attempt to set the columns to those widths, but the browser is saying "no - your content doesn't fit into that space, I'm going to resize the columns". Frustrating, but that's how HTML tables work.

If you really want those long strings to fit into 20px you would need to wrap the content in a div which has suitable CSS applied to it (i.e. width, white-space and overflow).

Allan

carslf

Thank you so much!

I guess I thought that setting the width to a value smaller than the content would allow it to text-wrap and not take so much space, but I found your solution to be just as effective, even if less convenient.

allan

If you use the table-layout CSS property set to fixed then yes, that is how the table works. But it won't then auto fit the other columns (or can do so badly).

Allan