Trending News
[html] table that fits whole screen?
I want a table that fits the whole screen with no vertical or horizontal scrollbars.
I have 3 rows, 1st and 3rd row to have fixed height while the 2nd row to be scrollable.
I have set my table width to 100% so it has no horizontal scrollbar.. but I don't know how to solve the vertical scrollbar problem.
What I have right now is something like this:
-----
#page {
width: 100%;
height: 100%;
}
-----
<table id="page">
<tr><td height=20% background="">
<div style="overflow:hidden;">...</div>
</td></tr>
<tr><td height=60% background="">
<div style="overflow:auto;">...</div>
</td></tr>
<tr><td height=20% background="">
<div style="overflow:hidden;">...</div>
</td></tr>
</table>
-----
Please help me! This is urgent!
Thanks in advance!
sorry, but that does not help me.
do you mean to say that there is no way i can make the overall height of my table 100% such that the browser does not have a vertical scrollbar?
6 Answers
- Empire539Lv 71 decade agoFavorite Answer
Technically, tables in (X)HTML do not have height attributes; it's invalid code.
The reason why you're code isn't working is because the way the <html> and <body> tags work. They're block elements that auto-expand the width of what we call the browser's viewport, aka the viewing window. However, they don't expand for height.
The fix? You can use CSS to set the <html> and <body> tags to auto fit the viewport, by setting them to 100% height and 100% width.
Your page should look something like:
<html>
<head>
<style type="text/css">
html,body
{
margin:0;
padding:0;
height:100%;
border:0;
}
table
{
height:100%;
width:100%;
}
</style>
</head>
<body>
<table id="page">
<tr>
<td height=20% background="">
<div style="overflow:hidden;">...</div>
</td>
</tr>
<tr>
<td height=60% background="">
<div style="overflow:auto;">...</div>
</td>
</tr>
<tr>
<td height=20% background="">
<div style="overflow:hidden;">...</div>
</td>
</tr>
</table>
</body>
</html>
So long as you don't have anything else above or below the table, then it should automatically resize if the browsing window is adjusted. Having anything else above/below the table will result in a vertical scrollbar.
Source(s): http://apptools.com/examples/tableheight.php - Anonymous5 years ago
i noticed that you have dreamweaver if you didn't use photoshop to design your site, then slice it and import the slices into dreamweaver i like to use the mode that allows you to assemble the site manually with the slices and it then creates the proper html configuered on what you are trying to do whenever i get stuck with html coding i will revert to the primitave way and do it like a puzzle. it will then give me the code i couldn't figure out myself im not telling you to do your whole site like that, that would be weird. but it is very helpful for those times you get stuck
- Anonymous1 decade ago
Browsers will always have scroll bars according to their window size and content of the web page unless you hide all overflow.
Try learning how to make proper web pages using the latest web standards.
How to Make a Webpage:
Full Web Building Tutorials: http://www.w3schools.com/
Beginner's HTML Tutorial: http://www.htmlbasix.com/
How to Create a Webpage: http://www.make-a-web-site.com/
So You Want To Set Up Your First Site, Huh?: http://www.htmlgoodies.com/tutorials/getting_start...
Web Site Blog: http://www.instant-web-site-tools.com/blog/
http://www.w3schools.com/site/default.asp
How to Start / Create Your Own Website: The Beginner's A-Z Guide: http://www.thesitewizard.com/gettingstarted/startw...
So, you want to make a Web Page!: http://www.pagetutor.com/html_tutor/index.html
Getting started with HTML: http://www.w3.org/MarkUp/Guide/
Creating your first website – Part 1: Setting up your site and project files (Adobe CS3/4): http://www.adobe.com/devnet/dreamweaver/articles/f...
Source(s): More info: Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design HTML Tutorial: www.hypergurl.com/whatishtml.html CSS Tutorials: http://www.w3schools.com/Css/default.asp http://www.csstutorial.net/ http://www.echoecho.com/css.htm http://www.html.net/tutorials/css/ http://www.w3.org/Style/Examples/011/firstcss http://htmldog.com/guides/cssbeginner/ http://www.davesite.com/webstation/css/ Web-Based Tools for Optimizing, Formatting and Checking CSS: http://sixrevisions.com/css/css_code_optimization_... Ron - How do you think about the answers? You can sign in to vote the answer.
- Anonymous5 years ago
why are all the answers so short these days?
