Modify the table in Exhibit Tabular View

From SIMILE Widgets
Revision as of 01:11, 3 November 2015 by Tullyhansen (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

There are a few ways you can modify the table of data generated from Exhibit's Tabular View. For more information, please see Exhibit/Tabular_View

1. The Tabular View has a few properties that modify the layout of the generated table.

<geshi> ex:border ex:cellPadding ex:cellSpacing </geshi>


2. The Tabular View also can use javascript "styler" functions. There is a generic table styler function and table-row styler function.

Here is an example of the row-styler: <geshi lang="javascript">

 <script>
 var zebraStyler = function(item, database, tr) {
     if (tr.rowIndex % 2) {
         tr.style.background = '#eee';
     } else {
         tr.style.background = '#ccc';
     }
 }
 </script>

</geshi>


3. You can also override the CSS for the generated table and it's children. This gives you the most flexibility and control over the appearance. Of course, you need to understand a little about CSS and selectors.

The generated table has a class of exhibit-tabularView-body. Therefore, you can set the style for this class such as

<geshi lang="css"> table.exhibit-tabularView-body {

 margin: 10px;
 border: 2px outset blue; 

} </geshi>

Likewise, you can modify the table cells, columns, rows, etc..., using something simila rto the following:

<geshi lang="css"> table.exhibit-tabularView-body th {

 border-width: 1px;
 padding: 1px;
 border-style: inset;
 border-color: gray;
 background-color: white;
 font-weight: bold;
 font-size: 110%;

} table.exhibit-tabularView-body td {

 border-width: 1px;
 padding: 1px;
 border-style: inset;
 border-color: gray;
 background-color: white;
 font-weight: normal;
 font-size: 11pt;

}

/* this modifies style for 1st column */ table.exhibit-tabularView-body tr td:nth-child(1) {

 background-color: #00ff00;
 color: #000000;
 white-space: nowrap;

}

</geshi>

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox