Modify the table in Exhibit Tabular View

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.

ex:border ex:cellPadding ex:cellSpacing

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: var zebraStyler = function(item, database, tr) { if (tr.rowIndex % 2) { tr.style.background = '#eee'; } else { tr.style.background = '#ccc'; } }

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

table.exhibit-tabularView-body { margin: 10px; border: 2px outset blue; }

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

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; }