Datatable rides up over top of page header

I have DataTables working well except for one thing.

My pages have a header bar with the site title and nav links. The header bar (#top) is fixed position so that vertically scrolling page content slides underneath it and it always stays visible.

The problem is that the datatable rides up over top of the header bar instead of sliding under it.

Unfortunately this is on an Intranet page and I can't link to it.

Can anyone help me solve this problem? The relevant CSS is below.

#top_offset, #top {
	height:30px;
}
		
#top_offset {
	margin-bottom:25px;
}
		
#top {
	padding: .5em;
	border-bottom: 1px solid navy;

	color: white; 
	background-color: #006; 

	
		/* ----- MAKE TOP MENU FIXED, CONTENT SCROLLS UNDER ----- */	

			/* *** DON'T FORGET TO ENABLE #TOP_OFFSET *** */
			position:fixed; 
			top:0;
			width:98.5%;
			left:50%;
			margin-left:-49.825%;
			
		/* ----- /make top menu fixed, content scrolls under ----- */	
		
}