Target one specific Jquery Data Table theader for CSS styles


// Targetting a single jQuery DataTable theader for css styles
$("#myTableId th").css("background-color", "#F1F1F1");
$("#myTableId th").css("color", "#3F3F3F");
$("#myTableId th").css("font-family", "Verdana, sans-serif");
$("#myTableId th").css("font-size", "14px");
$("#myTableId th").css("border-bottom", "2px solid #F8F8F8");
$("#myTableId th").css("padding", "5px 10px");

This code target a single jQuery DataTable theader and applies a few different css styles. The $("#myTableId th") code selects all the theader elements of the table with the id of myTableId and applies the css styles. The styles that are applied are a background color of #F1F1F1, color of #3F3F3F, font-family of Verdana, sans-serif, font-size of 14px, border-bottom of 2px solid #F8F8F8, and padding of 5px 10px. This will give the theader of the table a consistent look and feel across all browsers. If you wanted to target multiple theaders within a single table you could chain the $("#myTableId th") code together with additional css selectors. For example you could target the first theader with $("#myTableId th:first") and the last theader with $("#myTableId th:last"). It is important to note that the jQuery DataTable theaders are not visible by default, so the css styles applied to them will not be visible until the table is initialized. You can initialize the jQuery DataTable with $("#myTableId").DataTable();.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe