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

table problem 1

Status
Not open for further replies.
davikokar

davikokar

Technical User
May 13, 2004
523
IT
Hallo,

I am trying to make a table with an height=100% and a width=100%. The table should contain 5 columns. The middle column width is given in pixel, the two internal columns have also a given width, the two external columns should adjust depending on the screen width. The problems are two: first it seems that height:100% doesn't work in CSS, the other is that I would like that the two adjusting columns have the same width, so the page would look in the center.
I could manage to have this with HTML:

<table width="100%" height="100%">
<tr>
<td style="background-color:#00ff00"></td>
<td width="50" style="background-color:#ff0000"></td>
<td width="100"style="background-color:#0000ff"></td>
<td width="50" style="background-color:#ff0000"></td>
<td style="background-color:#00ff00"></td>
</tr>
<table>

but I cannot traslate it into CSS, if I use the same properties it doesn't work, what I'm using is:

table.first {width:100%;
height:100%px;
border:1px #000000 solid;}

td.middle_left {width:50px;}

td.central {width:100px;}

td.middle_right {width:50px;}

Am I missing something? thanks for suggestion

 
Sort by date Sort by votes
ehm... actually that was type mistake when I typed the code to post it. In the css file it was 100%, but doesn't work. The table is empty, does this can play a role?
 
Upvote 0 Downvote
I did copy&paste, removed typo, used <table class="first"> - and height extended to 100%.
 
Upvote 0 Downvote
I'm using internet explorer 6, with a xhtml transitional declaration...
 
Upvote 0 Downvote
AFAIK emtpty cells should have no effect on height. I tried this (valid XHTML/trans):
Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
	<title>Test</title>
	<style type="text/css">                   
	.first {	width:100%;	border:1px #000000 solid; height: 90%; }
	.first td.left {background-color:#00ff00;}
	.first td.middle_left {width:50px;background-color:#ff0000;}
	.first td.central {width:100px;background-color:#0000ff; }
	.first td.middle_right {width:50px;background-color:#ff0000;}
	.first td.right {background-color:#00ff00; }
	</style>
</head>
<body>
	
<div style="height: 100%; border: solid brown 4px;">	
<table class="first">
<tr>
	<td class="left">1</td>
	<td class="middle_left">2</td>
	<td class="central">3</td>
	<td class="middle_right">4</td>
	<td class="left">5</td>
</tr>
</table>
</div>
</body>
</html>
Works "as desired" in IE, while mozilla ignores height attributes. When parent container (body) has specified exact height (in px or em), all browsers work OK.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
703
PeDa
PeDa
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
216
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
201
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
162
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top