Topic: Two column scrollable table (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27648" title="Pages that link to Topic: Two column scrollable table (Page 1 of 1)" rel="nofollow" >Topic: Two column scrollable table <span class="small">(Page 1 of 1)</span>\
 
Maskkkk
Paranoid (IV) Inmate

From: Indiana, PA
Insane since: Mar 2002

 posted posted 03-16-2006 16:32

Is there any way, (using a table) to make a 2 column layout like this
_____________________________
| column head 1 | column head 2 |
---------------------------------------
| scrollable col 1 | scrollable col 2|
---------------------------------------


Where scrollable col 1 and scrollable col 2 scroll vertically independantly of one another.

Thanks,



- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-16-2006 18:15

Off hand there is no way that I am aware of, other than perhaps a javascript solution.

However, more importantly, there is no need to. If you want the columns to be able to scroll independantly, then obviously the rows don't correspond to each other, and what you really have is two lists side by side.

So code them that way

Maskkkk
Paranoid (IV) Inmate

From: Indiana, PA
Insane since: Mar 2002

 posted posted 03-16-2006 20:19

Figured it out.

Solution:

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<META NAME="GENERATOR" CONTENT="MAX's HTML Beauty++ 2004">
</HEAD>

<BODY>

	<table border="1">
	<thead>
		<tr>

			<td>Results</td>
			<td>Categories</td>
		</tr>
	</thead>
	<tbody>	
		<tr>
			<!-- The width of the table column controlls the width which is displayed-->
			<td style="width: 20%;">

				<!-- The 100% width we specifiy bellow is 100% of the td the div is contained in. -->
				<div style="width: 100%; height:450px; overflow: scroll;">Learn the most efficient method for managing a clean, table-based layout. The premise is simple...
Use CSS to manage your table-based layout to the extent that you can convert a 1000-page site from a fixed-width scenario to a fluid scnario (and much more) by editing a couple of rules in a single style sheet.

Placeholder text follows... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut PVII excelsior magna aliquam erat very cool. Ut wisi enim ad minim veniam, quis nostrud exerci tation Murray suscipit lobortis nisl ut aliquip ex ea commodo sound asleep. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel Gerry et Al dolore eu feugiat nulla BMW zoom zoom at vero eros et accumsan et I-95 South odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut we be cool.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut PVII excelsior magna aliquam erat very cool. Ut wisi enim ad minim veniam, quis nostrud exerci tation Murray suscipit lobortis nisl ut aliquip ex ea commodo sound asleep. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel Gerry et Al dolore eu feugiat nulla BMW zoom zoom at vero eros et accumsan et I-95 South odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut we be cool.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut PVII excelsior magna aliquam erat very cool. Ut wisi enim ad minim veniam, quis nostrud exerci tation Murray suscipit lobortis nisl ut aliquip ex ea commodo sound asleep. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel Gerry et Al dolore eu feugiat nulla BMW zoom zoom at vero eros et accumsan et I-95 South odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut we be cool.</div>
			</td>
			<td>
				<div style="height: 450px; overflow: scroll;">
				Learn the most efficient method for managing a clean, table-based layout. The premise is simple...
Use CSS to manage your table-based layout to the extent that you can convert a 1000-page site from a fixed-width scenario to a fluid scnario (and much more) by editing a couple of rules in a single style sheet.

Placeholder text follows... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut PVII excelsior magna aliquam erat very cool. Ut wisi enim ad minim veniam, quis nostrud exerci tation Murray suscipit lobortis nisl ut aliquip ex ea commodo sound asleep. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel Gerry et Al dolore eu feugiat nulla BMW zoom zoom at vero eros et accumsan et I-95 South odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut we be cool.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut PVII excelsior magna aliquam erat very cool. Ut wisi enim ad minim veniam, quis nostrud exerci tation Murray suscipit lobortis nisl ut aliquip ex ea commodo sound asleep. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel Gerry et Al dolore eu feugiat nulla BMW zoom zoom at vero eros et accumsan et I-95 South odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut we be cool.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut PVII excelsior magna aliquam erat very cool. Ut wisi enim ad minim veniam, quis nostrud exerci tation Murray suscipit lobortis nisl ut aliquip ex ea commodo sound asleep. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel Gerry et Al dolore eu feugiat nulla BMW zoom zoom at vero eros et accumsan et I-95 South odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut we be cool.
				</div>
			</td>
		</tr>

	</tbody>	
	</table>

</BODY>
</HTML>





- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-16-2006 20:40

But this is purely silly. In every way.

You are going very far out of your way to mimic what can be done with very simple and semantically correct methods.

You have two lists side by side. Code them as lists. Whatever styles you want applied can be applied via CSS to your lists.

FWIW
Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

 posted posted 03-17-2006 00:53

And the crusade continues...

Fight the good fight, my man.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

 posted posted 03-22-2006 09:56

Well, that and you've got inline styles in your code. They're a travesty against nature, so they are. And mixed-case tags. XHTML tags should always be lower-case.


Justice 4 Pat Richard

(Edited by Skaarjj on 03-22-2006 09:58)
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-22-2006 15:15

Mask - I hope you at least realize how uninclined to help you people will be when you consistantly ignore all the advice you are given as if it wasn't even posted.


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu