Register / Login

Post Reply Bookmark Topic Watch Topic
New Topic

programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums

this forum made possible by our volunteer staff, including ...

Marshals:

Campbell Ritchie
Tim Cooke
Liutauras Vilda
Jeanne Boyarsky
paul wheaton

Sheriffs:

Ron McLeod
Devaka Cooray
Henry Wong

Saloon Keepers:

Tim Holloway
Stephan van Hulst
Carey Brown
Tim Moores
Mikalai Zaikin

Bartenders:

Frits Walraven

Forum:

HTML Pages with CSS and JavaScript

Table with Scrollbar

Ranch Hand

Posts: 252

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Could you please provide me with the HTML Code for

a Table with Header fixed, having both horizontal and vertical scrollbar.

Thanks

$Hi/\bEr

Sheriff

Posts: 67752

173

Mac

Mac OS X

IntelliJ IDE

jQuery

TypeScript

Java

iOS

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Shiaber Shaam wrote:Could you please provide me with the HTML Code for ...

With 190 posts you should know by now that that's not the way that the Ranch works. Post your code and let us know what problems you are having with it.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Shiaber Shaam

Ranch Hand

Posts: 252

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I regret for that.

for horizontal.

and
for vertical

to use the vertical scroll bar, i have to scroll my horizontal scrollbar to the end.

i dont want like that and i dont know how to fix this.

thanks

$Hi/\bEr

Ranch Hand

Posts: 90

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

try this(my solution)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
.odd{background-color:#f9f9f9}
.even{background-color:#fefefe}
tr:hover{
	background-color:#c1eeff;cursor:pointer
}
</style>
<script type="text/javascript">
function setRowClass(){  //it's just an additional part to set class for even and odd rowsS
	var totalRows=document.getElementById('infoSec').getElementsByTagName('tr').length
	for(var i=0;i<totalRows;i++){
        var className= (i%2==0)?"even":"odd"
        document.getElementById('infoSec').getElementsByTagName('tr')[i].setAttribute('class', className)
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>col1</title>
</head>

<body onload="setRowClass()">
<table style="width:500px" cellspacing="0"><tr><td><strong>col1</strong></td><td><strong>col2</strong></td><td><strong>col3</strong</td></tr></table>
<div style="height:450px;width:513px;overflow:auto">
<table style="width:500px" cellspacing="0" id="infoSec">
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
<tr><td>val1</td><td>val2</td><td>val3</td></tr>
</table>
</div>
</body>

</html>

as you see, create a different table for only show header and another table in a div for rows
and about setRowClass() method
it was just an additional part to set .odd class for odd rows and .even for even rows
it works good but maybe not standard

NOTE:: in both tables set width value, maybe if you add a large text in one of the row in infoSec, the look of your page will change
such as

you can do it with a JS function like setRowClass() method, because you have a lot of rows and it's hard to set manually

Open source

Shiaber Shaam

Ranch Hand

Posts: 252

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

To use the vertical scroll bar, i have to scroll my horizontal scrollbar to the end.

I don't want like that .

Could you please help me.

Thanks

$Hi/\bEr

Eric Pascarello

author

Posts: 15385

6

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

there are a lot of options out on the net. Search google for css scollable table.

eric

So it takes a day for light to pass through this glass? So this was yesterday's tiny ad?

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing

reply

Bookmark Topic

Watch Topic

New Topic

Boost this thread!

Similar Threads