Setting the width of a column that is rotated 90 deg and the table has scroling

Glyndwr

I have a table that has both X and Y scrolling and some columns are rotated 90 deg. I want to set the column width for the columns rotated 90 deg. The column width is not working in this case:

http://live.datatables.net/royazeyu/1/edit

Kind regards,

Glyn

colin

Hi @Glyndwr ,

This thread should help, it's asking the same thing.

Cheers,

Colin

Glyndwr

Hi @colin ,

Thanks for your help; however, this link is just about rotating the heading. I have already achieved this. My issue is not being able to reduce the width of the columns that have been rotated.

Kind regards,

Glyn

Glyndwr

I have also found that fixed columns does not work:

fixedColumns:
leftColumns: 1
},

Glyndwr

Updated link: http://live.datatables.net/tequdoga/1/edit

tangerine

You need to install the fixedColumns extension.

Glyndwr

Hi @tangerine ,

Great! This solved the scrolling. However, the original width problem is still not resolved.

Kind regards,

Glyn

kthorngren

I found this article which may help:
https://www.jimmybonney.com/articles/column_header_rotation_css/

It talks about rotating at 45 degrees not 90 but it may help to workout what to do. I tried the code and it seems to work pretty good with Datatables at 45:
http://live.datatables.net/nenudori/1/edit

I removed the footer so it doesn't affect the Datatables column width calculation. Also I modified @colin's example to move the sort icons. You could add a second header to have them placed there instead.

Note that the width of the data in the column has an affect on Datatables column width calculation. You may need to turn on wrapping to achieve the affect you want. You can see this by removing nowrap from the table.

CSS is my weakest area. I don't understand the tutorial code well enough to help with rotating 90 degrees. I'll leave it to you (or someone else) to workout the changes needed to rotate 90 degrees. But once done it seems that you will have better control of the column widths.

Kevin

Glyndwr

Hi @kthorngren ,

Sorry for going dark for so long. I have been busy with my day job and spending a long time to get this to work. Thanks to you and https://css-tricks.com/rotated-table-column-headers/ This is now working. You are right that 45 degrees is much better although it has been extremely hard to get it to work.

Kind regards,

Glyn