class applying to column effects header and footer.

omerabbasi78

Hi all,

why is a class effecting the header and footer of table when i apply it in the column of datatable?
Consider following

Javascript

var tbl= $("#tblXYZ").DataTable({
            ajax: "/api/call/5",

            columns: [
                {
                    data: null,
                    className: "readonly",
                },
            ]
});

Table

<table id="tblTaxes" class="display snap-primary-table simple dataTable layout_fixed" cellspacing="0" style="width:100%">
                <thead>
                    <!-- Empty Tr to handle table width -->
                    <tr class="tab0">
                        <th class="empty_row"></th>
                     </tr>
                     <tr>
                        <th class="empty_row">Years of abatement/exemption</th>
                      </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td class="empty_row hidable"> </td>
                     </tr>
                </tfoot>

     </table>

CSS

 .readonly {
    opacity: .35;
}

When table renders it shows header and footer effected. Why is it so? I want this only to apply on the rows being rendered inside the datatable. What is the other way to do so?

Thanks

omerabbasi78

as you can see it effects only header and first footer row and not the second footer row.

omerabbasi78

for a more clearer view of whats happening

bindrid

className is applied to all cells in the column including the header and footer.

add this to prevent that from happening.

th.readonly {opacity: 1; }

allan

Or update your CSS to use tbody in the selector if you only want to target the cells in the tbody.

Allan

omerabbasi78

Thank you both @bindrid and @allan
Worked for me