column style applied to wrong column when previous column hidden with colvis button

triplett

I am using datatables 1.10.16, Buttons 1.5.1, Column visibility 1.5.1, ColReorder 1.4.1
on this page:
http://whp.altervista.org/vert-species-list.php
One of the columns is styled using:
...
#fun-table tbody tr td:nth-child(4){ font-style: italic;}
...
This works fine, as you can see the fourth column is in italics, except that if one of the first three columns is removed using the colvis buttons then the style is applied to the wrong column. This also happens if I re-order the columns.
I tried to apply the style using colgroup instead but this is not supported.
Is there any work around for this that does not require me to learn javascript, apart from putting <i> tags in every cell I want styled?

triplett

I see in the forum that there was a problem with ColReorder and the column visibility buttons not working together. I will upgrade to the latest version of datatables and buttons and see if this fixes my problem as well. It would help if there were release notes!

triplett

Upgrading to the latest datatables and colvis did not make any difference. I have fixed my problem using tags in the cell data, which has the advantage that part of the cell can be styled. If anybody wants to look at the original problem it is at:
whp.altervista.org/vert-species-list-testing.php

colin

It seems to work fine here. I suspect your problem is the colspan that I mentioned in your other thread.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

triplett

Hi Colin. I have modified your example to apply italics to the second column. When you hide the first column the italics are applied to the data in "office" instead of "position". Perhaps it is more accurate to say not just that colgroup is not supported but that different styles on different columns are not supported. I am not a javascript programmer but is seems to me that this could be fixed by having the javascript change the hidden columns to display: none instead of removing them from the DOM completely.

colin

Hi @triplett ,

When you hide columns, they are being removed from the DOM, so that would be expected with styling like that. I see you've got a solution already, but you could also add the class/style in columns.render or drawCallback.

Cheers,

Colin