Skip to main content

Customizing the Table Styles

Zen components use Cascading Style Sheets (CSS) to control their styles. Components have their own default styles. You can override these styles by providing your own CSS style definitions. There are a number of different places where you can place style information in your Zen application. Depending on where you place the style information, you can override default styles across your entire application, individual pages, or individual components. In this case, we will place the style information in HomePage.cls to override the default styles only on this page.

The wizard has already added opening and closing <style> tags to the XData Style block. We place our CSS style definitions between these tags.


/// This Style block contains page-specific CSS style definitions.
XData Style
{
  <style type="text/css">
  
  
  
  </style>
}

Now we add some CSS style definitions. The first definition controls the font used on the body of the page. The remaining definitions override the default styles for the tablePane. Note that these control the style of any tablePane placed on HomePage.cls.


/// This Style block contains page-specific CSS style definitions.
XData Style
{
  <style type="text/css">
    /*Style classes for use on this page */
   
     body { font-family: arial; }

     table.tpTable caption{
       background: transparent;
       font-size: 1.4em;
       font-weight: bold;
       text-align: left;
       border: none;
     }

    /* even rows */
     .tpEven { color: black; background: #ebf3ff; }
    
    /* odd rows */
     .tpOdd { color: black; background: white; }

    /* this is a selected row */
     table.tpTable tr.tpSelected { background: #3d80df; color: white; }
   
    /* hover for odd and even rows */
     tr.tpOdd:hover,tr.tpEven:hover { 
        background-color: #3d80df; 
        color: #ffffff; }
  
    /* table header style */
    table.tpTable th {
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        background: #C5D6D6;
        color: black;
        font-weight: bold;
        text-align: left;
        padding: 2px;
        overflow: hidden;
     }

    /* selected column header (th) */
     table.tpTable th.tpHdrSelected { background: #3d80df; }

    /* filter layout */
     table.tpFilterLayout td { border: none; background: #C5D6D6; }
  </style>
}

The CSS selectors used to control the style of the tablePane are the same selectors that are used in the %ZEN.Component.simpleTablePaneOpens in a new tab (Super class of %ZEN.Component.tablePaneOpens in a new tab) class definition.

Note:

To control the style of any tablePane used in the application, place this style information in the XData Style block of the Application class: ZenTutorial.Application.

To learn more about Zen styles, read Zen Style in Using Zen.

FeedbackOpens in a new tab