Two column scrollable table — OZONE Asylum, home of the Mad Scientists

Topic: Two column scrollable table $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27648" title="Pages that link to Topic: Two column scrollable table" rel="nofollow" >Topic: Two column scrollable table\$

Author	Thread
Maskkkk Paranoid (IV) Inmate From: Indiana, PA Insane since: Mar 2002	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 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 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 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 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 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 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.

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

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Two column scrollable table

Insert Slimies »

Insert UBB Code »

Topic: Two column scrollable table $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27648" title="Pages that link to Topic: Two column scrollable table" rel="nofollow" >Topic: Two column scrollable table\$