Applying Styles To Tables And Table Headers

This quick tip will explain how to use CSS in order to change the style of the Table Header Rows. This is useful when you wish to customize your tables and you can achieve this by using specific CSS Style rules.

1. Create a New Stylesheet and open it for editing by clicking the New Stylesheet button on the Project Ribbon Tab.
2. Create a specific named style rule that includes the selector "i-body-content" to override the template defaults.  In this case, we are creating a style rule named "MyCustomTableStyle". This style rule, when applied to a table, overrides the default style rules located in the default template. Once you have created this style rule, you can apply it to tables in the Content Editor using the Style Picker window - just select the TABLE element in the Page Map and tick the "MyCustomTableStyle" style in the Style Picker.

   .i-body-content table.MyCustomTableStyle, table.MyCustomTableStyle
   {
       color: Blue;
    background-color: Red;
       font-size: xx-large;
   }
   

3. You can also create a second style rule which will apply to just the table header cells (TH elements) in Tables with the "MyCustomTableStyle" rule applied:

   .i-body-content table.MyCustomTableStyle th, table.MyCustomTableStyle th
   {
       color: Blue;
    background-color: Red;
       font-size: xx-large;
   }
   

4. Remember to save your stylesheet - if you close the stylesheet editor, you will be prompted to save.