not applied width option when use column colspan

dddong

if your see image, colspan columns have same width

so I want to set each column width.

ex) col 1 : 100px;
col 2 : 150px;
col 3 : 300px;

although I assigned Width, Its ignored

Why would that be??

I set table-layout:fixed; at Table

And My code is below

$('#srTable').DataTable( {              
        autoWidth   : true,
        paging      : false,
        scrollY     : 400,                                      
        data : tabData,                 
        deferRender     : true,
        columns         : [
                            { data      : "taskType",
                              width         : "10px",
                              className     : "dt-center"
                            },
                            { data      : "taskCardNumber",
                              width         : "50px",
                              className     : "dt-center dt-nowrap",
                              createdCell   : function( td, cellData, rowData, row, col){
                                            $(td).attr("title", cellData );                                                                                                       
                               }
                            },
                            { data      : "taskTitle",
                              width         : "100px",
                              className     : "dt-body-left dt-nowrap",
                              createdCell   : function( td, cellData, rowData, row, col){
                                            $(td).attr("title", cellData );
                                            $(td).css("//width", "50px" );
                               }
                               } ]
});

dddong

one more.
if set colgroup tag, It apply only tbody data ( not apply header )
so not using this tag

very strange~

allan

Could you link to a test page showing the issue please?

Regarding the colgroup - unfortunately that isn't supported with a scrolling DataTable at this time.

Allan

dddong

Thanks allan, about reply

i made example codes at below address

https://jsfiddle.net/dongha123/fet2740e/

I want to resize columns (each size 30px, 100px, 200px )

but not applied,,,, it have same size

I need your help allan

thanks

allan

The CSS has width: 100% for the table by default. So the browser is stretching it out in order to fulfil that requirement. You would need to remove that in order for the widths to be allowed to work: https://jsfiddle.net/fet2740e/3/ .

Allan

dddong

i set width: auto; and i assigned each width

It's very good

but if contents of certain column overflow, this column stretch ..

because of width : auto;

for solving this, i tested various options

max-width,
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
etc...

but be useless

https://jsfiddle.net/dongha123/b5tdna5L/

allan

Those properties need to be on the td cells, but it still isn't working like I would have expected. If you look in the inspector the sizes have been correctly applied to the columns - I don't understand why it isn't shrinking...

Allan