class applying to column effects header and footer.

class applying to column effects header and footer.

omerabbasi78omerabbasi78 Posts: 17Questions: 7Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • omerabbasi78omerabbasi78 Posts: 17Questions: 7Answers: 1

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

  • omerabbasi78omerabbasi78 Posts: 17Questions: 7Answers: 1

    for a more clearer view of whats happening

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    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; }
    
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

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

    Allan

  • omerabbasi78omerabbasi78 Posts: 17Questions: 7Answers: 1

    Thank you both @bindrid and @allan :)
    Worked for me

This discussion has been closed.