"position:relative" - HTML / CSS

2 New Member

I have a table with html code
<style>
div.scroll
{
height:150px;
overflow:auto;
}
table.scrollable th
{
position:relative;
}
</style>
<div class="scroll">
<table class="scrollable">
<thead><tr><td>heading1</td><td>heading2</td><td>heading3</td></tr></thead>
<tbody>
<tr><td>value1</td><td>value2</td><td>value3</td></tr>
//repeated 100 times
</tbody>
</table>
</div>
this gives me a nice scrollable table with a fixed header. This is a stand alone.
When I include the same code in my jsp file, I get a scroll bar, but my header is not fixed. My jsp respects the "overflow:auto" attribute, but does not respect the "position:relative" attribute.
I did not add the standard <!doctype....> here, but its there in my code.
any help?

Dec 26 '06 #1

Subscribe Reply

2986

AricC

1,892

Recognized Expert Top Contributor

Post a link to your page I'm not quite clear what your asking. In this part (" //repeated 100 times") are you repeating that code 100 times? If so you should do that with javascript.

Dec 26 '06 #2

rsrimantula

New Member

Post a link to your page I'm not quite clear what your asking. In this part (" //repeated 100 times") are you repeating that code 100 times? If so you should do that with javascript.

here u go
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<html><head>
</head>
<style>
div.scrollWrapper{
float:left;
overflow:visible !important;
overflow:none;
overflow-y:scroll;
height:150px;
}

table.scrollable{
margin-right:0 !important;
margin-right:16px;
border-collapse:separate;
}

table.scrollable th{
background:#f7f7f7;
position:relative;
}

table.scrollable tbody{
height:150px;
overflow:auto;
}

table.scrollable tr{
height:0px;
}

table.scrollable td{
border-left:1px solid #999999;
border-bottom:1px solid #999999;
text-align:center;
}
</style>
<body>
<div class="scrollWrapper">
<table class="scrollable">
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
<th>Symbols</th>
</tr>
</thead>
<tbody>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
<tr><td>111</td><td>aaa</td><td>@@@</td></tr>
</tbody>
</table>
</div>
</body></html>
The above code...so when u have the above code as a 'scroll.html' it works fine..But when u have it in a jsp file...the fixed header doesnt work.

Thanks,
Raghav

Dec 27 '06 #3

AricC

1,892

Recognized Expert Top Contributor

So this isn't a HTML question more of a java question?

Dec 27 '06 #4

Similar topics

6829

Photo "Collage" via absolute positioning. Centered???

by: Greg G | last post by:

We have a band web site. Here's the site now: http://www.risky-biz.com The home page has a "collage" of photos of the members of the band. The collage is actually one .gif image that I put...

HTML / CSS

1517

Strange behaviors in the "position property"

by: Luigi | last post by:

I would know what "criteria" is used in box positioning with the position property. Here my tries (using IE and Opera): I have a box with an absolute positioning (properties used: position,...

HTML / CSS

5601

What does "th.locked" mean?

by: Giggle Girl | last post by:

I have inherited a stylesheet at work, with the designer no longer working here. In an external stylesheet it says: thead th, thead th.locked { position:relative; }

HTML / CSS

5055

element.style.position="relative !important";

by: petermichaux | last post by:

Hi, I tried the following and everything worked fine. element.style.position="relative"; Then I tried to make the CSS rule important and it didn't work. The positioning was all wrong in...

Javascript

28231

Is there any confirm box with "yes" or "no" option

by: balakrishnan.dinesh | last post by:

hi Frnds, I need Confirm box with "yes" or "no" buttons, Is that possible in JAVASCRIPT , Can anyone tell me the solution for this or anyother way to create confirm box with "yes" or "no" button?...

Javascript

29363

How to position a "footer" div? (Aligning with "bottom:0" aligns to the viewport and not to the containing element :-( )

by: john | last post by:

Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...

HTML / CSS

13723

Three "<div class=foo>" boxes in the same line, is it possible?

by: Francesco Moi | last post by:

Hi. I'm trying to place three "<div class=foo>" boxes in the same line: ----html-------------------- <HTML><HEAD> <link href="test.css" rel="stylesheet" type="text/css" /> </HEAD> <body>...

HTML / CSS

8893

How To Create Tab With "Active Arrow" Below?

by: pbd22 | last post by:

Hi. I want to create a tab with a little "active tab" arrow below it to tell the user where they are. An example is here: http://personals.yahoo.com/us/search/dashboard Does anybody know of...

HTML / CSS

1573

The "position" of variables

by: Julek | last post by:

Hi, I wanted to know, if there is guarantee that a specific variable is always the same number of bytes forward than the beginning of the struct/class. Example: class MyClass { .... int var;...

C / C++

7138

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7353

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

5662

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4737

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3222

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3212

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1572

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

781

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

446

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General