Sticky headers appear when scrolling a table either in view mode or in edit/add rows mode. This is because the node body is included in the table caption so that the sticky header appears when the caption scrolls to the top of the page.
I was able to fix this for the view page by removing the node body from the caption. Here is the code I used:
/**
* Implementation of hook_view().
*/
function nodetable_view($node, $teaser = FALSE, $page = FALSE) {
// $caption = $node->body;
// $node->body = '';
$caption = ''; // the caption causes the sticky header to position incorrectly.
$node = node_prepare($node, $teaser);
// Without this theme_table throws two notices, because the $header is expected
// to be keyed starting from 0 in tablesort_get_order().
// This is a workaround, but works for now. TODO move this into loading.
$headers = array();
foreach ($node->table->header as $header) {
$headers[] = $header['data'];
}
// Unique id for the rendered table.
$nodetable_id = 'nodetable-'. $node->nid;
$node->content['table'] = array(
'#value' => theme('table', $headers, $node->table->rows, array('id' => $nodetable_id, 'class' => 'nodetable tablesorter'), $caption),
'#weight' => 1,
);
// Apply tablesort.
nodetable_add_tablesort($node);
return $node;
}
I also made a couple of changes to the stylesheet to get the sticky header to match the real header:
table {
font-family:arial;
background-color: #e6EEEE; /* frosted glass */
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table th { /* this shifts left about 1px */
background-color: #e6EEEE; /* frosted glass */
border: 1px solid #ACACAC; /* light grey */
font-size: 8pt;
padding: 4px;
}
However the same problem occurs in edit/add row mode and I have been unable (so far) to fix it.
Comments
Comment #1
Patricia_W commentedThere is mention in thread http://drupal.org/node/1037938 of sticky table javascript not cloning the header classes correctly. I suspect this is the cause of the style problems.