Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

text tbody appears in (fixed) header

Status
Not open for further replies.
Mariootje

Mariootje

Programmer
Aug 10, 2001
33
NL
Hi there,

I managed to create a table with a fixed THEAD and a scrollable TBODY. Only problem is that the text of the TBODY is partly visible in the THEAD when scrolling.

Anybody a idea how to fix this?

To do so I created 2 classes, one for the container and one for the THEAD.

div.tableContainer {
clear: both;
border: 1px solid #963;
height: 100px;
overflow: auto;
width: 760px;
}

thead.fixedHeader tr {
position: relative
}

thead.fixedHeader th {
background: #ffffff;
padding: 4px 3px;
text-align: left
}

 
Sort by date Sort by votes
From what you've given us, it is really difficult to say anything. Do you have an URL with the example or at least the complete html&css for the example? Plus, could you tell us which browser you're seeing the problem in?
 
Upvote 0 Downvote
I'm using IE 6.0
Here's the code:

<html>
...
<div id="tableContainer" class="tableContainer">
<table border="1"> <!-- table for correct scrolling -->
<thead class="fixedHeader">
<tr> <!-- heading of result table -->
<th style="width: 33px"><p>&nbsp;</p></th>
<th style="width: 135px"><p>Header 1</p></th>
<th style="width: 100px"><p>Header 2</p></th>
<th style="width: 135px"><p>Header 3</p></th>
<th style="width: 135px"><p>Header 4</p></th>
</tr> <!-- end heading of result table -->
</thead>
<tbody class="scrollContent">
<tr> <!-- contents of results table -->
<td style="width: 33px"><p><input type="checkbox"/></p></td>
<td style="width: 135px"><p>content 1</p></td>
<td style="width: 100px"><p>content 2</p></td>
<td style="width: 135px"><p>content 3</p></td>
<td style="width: 135px"><p>content 4</p></td>
</tr> <!-- end contents of results table -->
<%}}%>
</tbody>
</table> <!-- end table for correct scrolling -->
</div>
...
</html>

The complete css would be to much I would say. I hope the code sent in my original post will do.
 
Upvote 0 Downvote
Well - something is not right. I've combined the HTML you've given us with the CSS you've given us, added body tags, and removed the server-side closing braces to create this:

Code: 
<html>
<head>
	<style type="text/css">
		div.tableContainer {
			clear: both;
			border: 1px solid #963;
			height: 100px;
			overflow: auto;
			width: 760px;
		}

		thead.fixedHeader tr {
			position: relative
		}

		thead.fixedHeader th {
			background: #ffffff;
			padding: 4px 3px;
			text-align: left
		}
	</style>
</head>

<body>
	<div id="tableContainer" class="tableContainer">
		<table border="1"> <!-- table for correct scrolling -->
			<thead class="fixedHeader">
				<tr> <!-- heading of result table -->
					<th style="width: 33px"><p>&nbsp;</p></th>
					<th style="width: 135px"><p>Header 1</p></th>
					<th style="width: 100px"><p>Header 2</p></th>
					<th style="width: 135px"><p>Header 3</p></th>
					<th style="width: 135px"><p>Header 4</p></th>
				</tr> <!-- end heading of result table -->
			</thead>
			<tbody class="scrollContent">
				<tr> <!-- contents of results table -->
					<td style="width: 33px"><p><input type="checkbox"/></p></td>
					<td style="width: 135px"><p>content 1</p></td>
					<td style="width: 100px"><p>content 2</p></td>
					<td style="width: 135px"><p>content 3</p></td>
					<td style="width: 135px"><p>content 4</p></td>
				</tr> <!-- end contents of results table -->
				<tr> <!-- contents of results table -->
					<td style="width: 33px"><p><input type="checkbox"/></p></td>
					<td style="width: 135px"><p>content 1</p></td>
					<td style="width: 100px"><p>content 2</p></td>
					<td style="width: 135px"><p>content 3</p></td>
					<td style="width: 135px"><p>content 4</p></td>
				</tr> <!-- end contents of results table -->
				<tr> <!-- contents of results table -->
					<td style="width: 33px"><p><input type="checkbox"/></p></td>
					<td style="width: 135px"><p>content 1</p></td>
					<td style="width: 100px"><p>content 2</p></td>
					<td style="width: 135px"><p>content 3</p></td>
					<td style="width: 135px"><p>content 4</p></td>
				</tr> <!-- end contents of results table -->
				<tr> <!-- contents of results table -->
					<td style="width: 33px"><p><input type="checkbox"/></p></td>
					<td style="width: 135px"><p>content 1</p></td>
					<td style="width: 100px"><p>content 2</p></td>
					<td style="width: 135px"><p>content 3</p></td>
					<td style="width: 135px"><p>content 4</p></td>
				</tr> <!-- end contents of results table -->
				<tr> <!-- contents of results table -->
					<td style="width: 33px"><p><input type="checkbox"/></p></td>
					<td style="width: 135px"><p>content 1</p></td>
					<td style="width: 100px"><p>content 2</p></td>
					<td style="width: 135px"><p>content 3</p></td>
					<td style="width: 135px"><p>content 4</p></td>
				</tr> <!-- end contents of results table -->
			</tbody>
		</table> <!-- end table for correct scrolling -->
	</div>
</body>
</html>

I'm not sure how that gives a static header at all - the whole lot scrolls for me.

Perhaps you can create a proper cut-down test harness and make sure it exhibits the problem before posting the code.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
710
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
659
PeDa
PeDa
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
217
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top