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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Emulating Excel/Access on the web

Status
Not open for further replies.
hollywood77

hollywood77

Programmer
May 6, 2004
5
US
As far as emulating, what I mean is that the left side would have descriptive columns that can be scrolled up and down (not left and right), and the would be header rows that can be scrolled left and right (not up and down), and finally the rest of the table scrolls dependendant on the direction. The only reson is that I am pulling about 30 columns of data at upwards of 3500 rows.
 
Sort by date Sort by votes
One hint would be to nest a table inside of a table. Or, nest the tables in a div and use css to control the scrolling (overflow).

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
I thought about the nesting tables, but its not as clean. I'm thinking I'll try to javascript it, if not keep it as pages.
 
Upvote 0 Downvote
Take an Excel Workbook, saveas html, look at resulting code.

Brian
 
Upvote 0 Downvote

You cannot do what you are asking using standard scrollbars that are provided by the browser, unless you don't mind either the row headers or the column headers being scrolled off the screen (which is not what happens in Excel).

If, however, you use a custom scrolling mechanism, and then use JavaScript to scroll, you should be able to achieve what you desire.

Hope this helps,
Dan
 
Upvote 0 Downvote
found this for you, dont know if it works or if it is what you want, curteousy of this guy: PHP-NewB@
Code: 
overflow-y: scroll;
That is not a CSS property.

Try this:

<html>
<head></head>
<body>

<div style="width:200px;height:200px;overflow:scroll;">
<table width="100%" height="100%">
<tr>
<td></td>
</tr>
</table>
</div>

</body>
</html>

[EDIT] If you don't want a horizontal scroll, change "scroll" to "auto", this will cause the table to only scroll when there is more content than space, but it will not scroll horizontally, unless there is a string longer than the DIV width.

gd luk

______________________________________________________________________________
"The sluggard does not plow after the season, so he begs during the harvest and has nothing."
-[Proverbs 20:4]
 
Upvote 0 Downvote
Thanks for the help. I have found a control ( doScroll ) in javascript that using nested tables inside span tags, with the overflow set to scroll or hidden will provide me the desired effect.
 
Upvote 0 Downvote
If you have the time, post through a URL (when you've got this under way). I'd like to see how it looks (and how it works)!

Cheers,
Jeff
 
Upvote 0 Downvote
Sorry about the complete and utter lack of comments. This is something I just played with and created. The main project I am working on is an intranet application.

Code: 
<HTML>
<HEAD>
<TITLE></TITLE>
	<style>
		table {table-display:fixed; table-layout:fixed;}
		tr {height:40;}
		th {width:70; border: 1px solid black;}
		td {width:70;}
	</style>
	<script>
		function MoveRight()
		{
			colHeaders.doScroll("pageRight");
			colCells.doScroll("pageRight");
		}
	</script>
	<script>
		function MoveLeft()
		{
			colHeaders.doScroll("pageLeft");
			colCells.doScroll("pageLeft");
		}
	</script>
	<script>
		function MoveUp()
		{
			colRows.doScroll("pageUp");
			colCells.doScroll("pageUp");
		}
	</script>
	<script>
		function MoveDown()
		{
			colRows.doScroll("pageDown");
			colCells.doScroll("pageDown");
		}
	</script>
</HEAD>
<BODY>

<P>&nbsp;</P>
<br>
<input type="button" value="Up" onClick="MoveUp()" id=btnUp name=btnUp>
<input type="button" value="Down" onClick="MoveDown()" id=btnDown name=btnDown>
<input type="button" value="Left" onClick="MoveLeft()" id=btnLeft name=btnLeft>
<input type="button" value="Right" onClick="MoveRight()" id=btnRight name=btnRight>

<table style="position: absolute; left: 0px; top: 200px;" cellpadding="0" cellspacing="0" >
	<tr>
		<th>Col1</th>
	</tr>
</table>
<span id="colHeaders" Style="overflow:hidden; height:40; width:150; position: absolute; left: 70px; top: 200px; border-right: 1px solid black;">
<table cellpadding="0" cellspacing="0">
	<tr>
		<th>Col2</th>
		<th>Col3</th>
		<th>Col4</th>
		<th>Col5</th>
	</tr>
</table>
</span>
<span id="colRows" Style="overflow:hidden; height:120; width:70; position: absolute; left: 0px; top: 240px; border-right: 1px solid black;">
<table cellpadding="0" cellspacing="0">
	<tr>
		<th>Row1</th>
	</tr>
	<tr>
		<th>Row2</th>
	</tr>
	<tr>
		<th>Row3</th>
	</tr>
	<tr>
		<th>Row4</th>
	</tr>
	<tr>
		<th>Row5</th>
	</tr>
</table>
</span>
<span id="colCells" Style="overflow:hidden; height:120; width:150; position: absolute; left: 70px; top: 240px; border-right: 1px solid black;">
<table cellpadding="0" cellspacing="0">
	<tr>
		<th>Row1</th>
		<th>Row1</th>
		<th>Row1</th>
		<th>Row1</th>
	</tr>
	<tr>
		<th>Row2</th>
		<th>Row2</th>
		<th>Row2</th>
		<th>Row2</th>
	</tr>
	<tr>
		<th>Row3</th>
		<th>Row3</th>
		<th>Row3</th>
		<th>Row3</th>
	</tr>
	<tr>
		<th>Row4</th>
		<th>Row4</th>
		<th>Row4</th>
		<th>Row4</th>
	</tr>
	<tr>
		<th>Row5</th>
		<th>Row5</th>
		<th>Row5</th>
		<th>Row5</th>
	</tr>
</table>
</span>
</BODY>
</HTML>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
416
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
642
Mike Lewis
Mike Lewis
MitGandhi
  • Locked
  • Question
WebGL Error
Replies
3
Views
361
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
363
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top