Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
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
Jeanne Boyarsky
Ron McLeod
Paul Clapham
Liutauras Vilda
Sheriffs:
paul wheaton
Rob Spoor
Devaka Cooray
Saloon Keepers:
Stephan van Hulst
Tim Holloway
Carey Brown
Frits Walraven
Tim Moores
Bartenders:
Mikalai Zaikin
Forum:
HTML Pages with CSS and JavaScript
Table with fixed header and scolling body in Safari.
Kuladip Yadav
Ranch Hand
Posts: 162
I like...
posted 15 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Hi Ranchers,
I want to create Table with fixed header and scrolling body for Safari browser.
Does any body have solution for that ?
I have managed to do it on ie and firefox.
Thanks
- Kuldeep
Eric Pascarello
author
Posts: 15385
6
posted 15 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
I am currently working on getting a scrollable table to work in all major browsers. It should work fine in Safari.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> /* TABLE WRAPPER */ div.scrollTable { border: 1px solid black; width: 500px; overflow: hidden; *width : 516px; *height : 300px; *overflow : auto; } /* TABLE */ div.scrollTable table{ width: 500px; border-collapse: collapse; } /* TABLE HEADER */ div.scrollTable thead tr { display: block; *display: inherit; *position: relative; } div.scrollTable thead th{ border: 1px solid #AAA; border-bottom: 1px solid #333; background-color: #CCC; } div.scrollTable thead th a, div.scrollTable thead th a:link, div.scrollTable thead th a:visited{ display: block; padding: 4px; color: #000; } div.scrollTable thead a:hover{ background-color: #EEE; color: #00A; } /* TABLE TBODY */ div.scrollTable tbody { display: block; overflow: auto; height: 290px; width: 100%; *display: inherit; *overflow: visible; *height: auto; } div.scrollTable tbody td{ padding: 3px; border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; border-left: 0px; background: #FFF; } /* TABLE HEADER AND BODY CELLS */ div.scrollTable thead th, div.scrollTable tbody td{ width: 121px; } div.scrollTable thead th + th + th + th{ width: 138px; } div.scrollTable tbody td + td + td + td{ width: 120px; } </style> </head> <body> <div class="scrollTable"> <table> <thead> <tr> <th><a href="#" title="">Header 1</a></th> <th><a href="#" title="">Header 2</a></th> <th><a href="#" title="">Header 3</a></th> <th><a href="#" title="">Header 4</a></th> </tr> </thead> <tbody> <tr> <td>Row 0 Column 1</td> <td>Row 0 Column 2</td> <td>Row 0 Column 3</td> <td>Row 0 Column 4</td> </tr> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> <td>Row 1 Column 4</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> <td>Row 2 Column 4</td> </tr> <tr> <td>Row 3 Column 1</td> <td>Row 3 Column 2</td> <td>Row 3 Column 3</td> <td>Row 3 Column 4</td> </tr> <tr> <td>Row 4 Column 1</td> <td>Row 4 Column 2</td> <td>Row 4 Column 3</td> <td>Row 4 Column 4</td> </tr> <tr> <td>Row 5 Column 1</td> <td>Row 5 Column 2</td> <td>Row 5 Column 3</td> <td>Row 5 Column 4</td> </tr> <tr> <td>Row 6 Column 1</td> <td>Row 6 Column 2</td> <td>Row 6 Column 3</td> <td>Row 6 Column 4</td> </tr> <tr> <td>Row 7 Column 1</td> <td>Row 7 Column 2</td> <td>Row 7 Column 3</td> <td>Row 7 Column 4</td> </tr> <tr> <td>Row 8 Column 1</td> <td>Row 8 Column 2</td> <td>Row 8 Column 3</td> <td>Row 8 Column 4</td> </tr> <tr> <td>Row 9 Column 1</td> <td>Row 9 Column 2</td> <td>Row 9 Column 3</td> <td>Row 9 Column 4</td> </tr> <tr> <td>Row 10 Column 1</td> <td>Row 10 Column 2</td> <td>Row 10 Column 3</td> <td>Row 10 Column 4</td> </tr> <tr> <td>Row 11 Column 1</td> <td>Row 11 Column 2</td> <td>Row 11 Column 3</td> <td>Row 11 Column 4</td> </tr> <tr> <td>Row 12 Column 1</td> <td>Row 12 Column 2</td> <td>Row 12 Column 3</td> <td>Row 12 Column 4</td> </tr> <tr> <td>Row 13 Column 1</td> <td>Row 13 Column 2</td> <td>Row 13 Column 3</td> <td>Row 13 Column 4</td> </tr> <tr> <td>Row 14 Column 1</td> <td>Row 14 Column 2</td> <td>Row 14 Column 3</td> <td>Row 14 Column 4</td> </tr> <tr> <td>Row 15 Column 1</td> <td>Row 15 Column 2</td> <td>Row 15 Column 3</td> <td>Row 15 Column 4</td> </tr> <tr> <td>Row 16 Column 1</td> <td>Row 16 Column 2</td> <td>Row 16 Column 3</td> <td>Row 16 Column 4</td> </tr> <tr> <td>Row 17 Column 1</td> <td>Row 17 Column 2</td> <td>Row 17 Column 3</td> <td>Row 17 Column 4</td> </tr> <tr> <td>Row 18 Column 1</td> <td>Row 18 Column 2</td> <td>Row 18 Column 3</td> <td>Row 18 Column 4</td> </tr> <tr> <td>Row 19 Column 1</td> <td>Row 19 Column 2</td> <td>Row 19 Column 3</td> <td>Row 19 Column 4</td> </tr> </tbody> </table> </div> </body> </html>
Eric
Jason Marlyn
Ranch Hand
Posts: 90
posted 15 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
very cool and nice Mr. Pascarello developed it, it's really better than my solution, thanks
my solution
https://coderanch.com/t/431454/HTML-JavaScript/Table-with-Scrollbar
Open source
Kuladip Yadav
Ranch Hand
Posts: 162
I like...
posted 15 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Thanks Eric & ArAsh for reply
permaculture is largely about replacing oil with people. And one tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Table Header Fixed
Table with header fixed.
Safari to emulte like IE using X-UA-Compatible
limit clause in MS SQL
Can someone help me force Firefox to play nice with scrolling?
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
More...