Modify the table in Exhibit Tabular View

From SIMILE Widgets

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:

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

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