CSS - Hidding Thead

I have the css below & would like to make the text on imageOne hidden but don't know how.

<style>

textarea.imageOne{
background-color:#000066;
background-image:url('mom-copy.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
color:000066;

}
textarea.imageTwo{
background-color:#000066;
background-image:url('text3.jpg');
background-repeat:no-repeat;
color:ffffff;
}
</style>

I have a report that is generated, and I want to use <thead> to show my header row in the table across multiple pages. The problem is that the first page has a bunch of miscellaneous title information that starts before the header row. So I would like to use <thead> on pages 2 and beyond, but not the first page. Is this possible?

Hey all, i have a problem that is a major annoyance. Im printing a report out of Firefox and I need the headers to show up on every page. I searched on Google and got the code to show the headers.

PHP Code:
#print thead {
    display:table-header-group;
} 





When I do this everything works as the header is printed off on every page, however when I add this code the pages after the first page lose their left and right borders. The horizontal borders stay but the verticle lines disappear.

Anyone have any idea how to correct this problem? Thanks in advance for any help!

I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this.

What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar.


Here's a sample:
http://restoredirect.com/test.html

You'll notice I'm close, but just a little off. Can someone help me to get it right?

While not ideal, I think this may help many people.

Also, if someone does have a more ideal approach please speak up and let me know!

Whiel everything else about the menu works fine, the hidden parts when not in use are over on the far right side of the page, hidden unless you scroll over.

Practically, I would like to eliminate the bottom scroll bar, a) because it doesn't look good and b) because there is no reason for the user to need to see the hidden menu boxes until they are supposed to be displayed

But of course I'm not sure what the problem with the code is::

#menu li:hover ul { left: 265px; z-index: 3; }
#menu { width: 100px; }
#menu, #menu ul { list-style: none; margin: 0; padding: 0; }
#menu a { display: block; border-width: 0; margin: 0; padding: 0; width: 100px; }
#menu li ul { position: absolute; top: 0; left: 100%; width: 100%; z-index: 3; }
#menu li ul:hover { display: none; z-index: 3; }
#menu ul li:hover ul { display: block; z-index: 3; }

the website link:: HOB