The Interactive Reports in Oracle Application Express (APEX) are extremely useful. Sometimes you need to tweak their styling but there are limited ways to do that from the interface. So how can you do it?

The styling of an interactive report is set using the default stylesheet (something like apex_3_1.css).

This contains a number of CSS classes that define the look and feel of the report. Here is an extract of the relevant bits :

.apexir_WORKSHEET_DATA {

  border:0 #fff solid;

  empty-cells:show;

  border-collapse:collapse;

  font-size:8pt;

  }

.apexir_WORKSHEET_DATA tfoot tr td{

  background:#efefef;

  }

.apexir_WORKSHEET_DATA th{

  background:#4e4e4e;

  font-weight:bold;

  color:#fff;

  border-top:1px #ccc solid;

  border-bottom:1px #aaa solid;

  white-space:nowrap;

  vertical-align:center;

  letter-spacing:1;

  font-size:8pt;

  background-image:url(../ws/report_bg.gif);

  background-repeat:repeat-x;

  }

.apexir_WORKSHEET_DATA th div{

  color:#fff;

  letter-spacing:1;

  font-size:8pt;

  text-decoration:underline;

  cursor:pointer;

  margin:3px 9px;

  }

.apexir_WORKSHEET_DATA td{

  background:#efefef;

  border-top:1px #fff solid;

  border-bottom:1px #ccc solid;

  font-size:8pt;

  padding:3px 9px;

  empty-cells:show!important;

  }

#apexir_WORKSHEET .apexir_REPEAT_HEADING{

  padding:10px 0 5px 0;

  border:0 solid #fff;

  background:#fff;

  font-weight:bold;

  font-size:9pt;

  text-align:left;

  color:#000;

  }

#apexir_WORKSHEET .apexir_AGGREGATE_VALUE{

  font-weight:bold;

  background:#eee;

  text-align:right;

  }

These can be overridden by inserting your own definitions into the page header.

For example to top align the data in the report row you can insert the following CSS into your page header :

<STYLE TYPE="text/css">

table.apexir_WORKSHEET_DATA td

{

  vertical-align:top !important;

}

</style>

This will top align all the td elements (table cells) in your report.

The !important tag will ensure you definition takes priority over the default.

You can use this technique to adjust other CSS properties of the table cells used to build the interactive report.