|
CSS - Full Height Table Inside Another Table
I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Similar Tutorials<div height = 100% doesn't work inside <table> but if i change height = 900px, it works. anyone know how to fix it? see example code below. thx so much <table border = 1> <tr> <td> mesg </td> </tr> <tr> <td> <div style='HEIGHT:100%; WIDTH:100%; OVERFLOW:auto'> <table border=1 width=100%> <tr><td>stuff</td> <td>more stuff</td></tr> <tr><td>stuff</td> <td>msg </div></td></tr> </table> </div> </td></tr> </table> I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance Hi, This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page. I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu. I imagine there is a way to get two column layout ysing just DIVS. . . I use my site for school, I'm a high school teacher & I teach some university coursework. My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.) sitenav : left hand nav_bar (for site-wide) entry : min content sidebar: Right hand sub_nav_bar (within this area) ----------------- div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%; font-size: 11px; background-color: white; border: 1px solid red; z-index: 10;} div#entry { color: #660; margin: 0 20% 1em; padding: 0 } div#sidebar {position: absolute; top: 4em; right: 0; width: 20%; font-size: 11px; z-index: 11;} ---------------------- http://www.mrplatts.com/pitt_tech/schedule.html any help? Thanks, Rich I need two scrollable div inside a table. Please help. Details: The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table. Attempt #1 i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution. Attempt #2 i added position: absolute; --> there are scrollbars but the 2 divs are overlapping HTML: Code:
<html>
<head>
<style>
.container
{
border: 2px solid red;
overflow: scroll;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
</tr>
</table>
</div>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> aaaa</td>
<td width=200> bbbb </td>
<td width=200> cccc</td>
<td width=200> ddd</td>
<td width=200> eee</td>
<td width=200> fff</td>
<td width=200> ggg</td>
<td width=200> hhh</td>
<td width=200> iii</td>
<td width=200> jjj</td>
<td width=200> kkk</td>
<td width=200> lll</td>
<td width=200> mmm</td>
<td width=200> nn</td>
<td width=200> ppp</td>
</tr>
</table>
</div>
</td>
</tr></table>
</body>
</html>
Righto, this should be easy. I want to set the height of a table. I'd rather do it in CSS but i'll use inline stuff if I have to. Here's my attempt, I'm pretty confused about why this doesn't work. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table height='20px' border=1 style="overflow: auto; height: 20px;"> <tr> <td>Quite a big Val 11</td> <td>62</td> <td>Val 13</td> </tr> <tr> <td class='test'>This cell has a class</td> <td>22</td> <td>23</td> </tr> <tr> <td>Val 11</td> <td>12</td> <td>Val 13</td> </tr> </table> </BODY> </HTML> I've seen this posted before but none of the fixes seem to help. I am using a header table a body table and a footer table. I need the footer to always be at the bottom, and the body table to expand to meet the footer eeven if there is not enough content to push it down. I've managed to force the footer to the bootom fine. The auto expanding body is another issue. here is my syle sheet: BODY { margin-top: 0em; margin-right: 0em; margin-bottom: 0em; margin-left: 0em; } #container { position: relative; min-height: 100%; } #content { position: relative; height: 100%; } #footer { position: absolute; bottom: 0; } Here is my page code: <div id="container"> table width="200" border="1" id="header"> <tr> <td bgcolor="Fuchsia">x</td> </tr> </table> <table width="200" border="1" id="content"> <tr> <td bgcolor="Aqua">y</td> </tr> </table> <table width="200" border="1" id="footer"> <tr> <td bgcolor="Blue">z</td> </tr> </table> </div> Using table height=100% for the body table works fine in IE, but it busts in Netscape and Mozilla. I know I shouldn't be using tables for layout, but hey... the ideal.gif is what I'm looking for, however the code above creates current.gif. the "height: 100%;" in the content div forces it to expand to 100%(the view-window's size) and not just 100% of the remaining space. Any help greatly appreciated. I've set
PHP Code: html, body { height: 100%; } and PHP Code: .fullheight { height: 100%; } I've also set in the html, body all margins to a value of "0" What results is, the table I'm applying .fullheight to extends beyond the bottom of the page about 50 pixels or so when it should've stopped growing when it hit the bottom edge of the viewable area in both NS and IE. Any ideas? Suggestions? I have a table and have specified the width successfully but cannot figure out how to make the overall minimum height of the table 100% of the window/frame height. Any way to do this? It seems like I've done it before but can't remember. Thanks in advance. Hi there, I would like to give a table a minimum height, since there is a nice command in CSS for this, i tried it, but it doesn't work. Does anyone know how to use this min-height command? Does it only work on DIV or SPAN, what are the restrictions and is it a supported command in mozilla FF and IE? Regards, Sander Hello, I'm brand new to this CSS business, so please be gentle! I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window. I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated. Thanks! Code:
-- HTML
<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>
-- CSS
/* Dashboard */
#Dashboard {
border: 1px solid #b5bfbf;
padding: 2px;
}
/* Overview Table */
#Overview {
width: 100%;
border-collapse: collapse;
height: 50px;
background-image: url(../images/dashboard/overviewtable_bg.png);
background-repeat: repeat-x;
}
#Overview td {
padding-top: 8px;
padding-left: 5px;
border: 1px solid #b5bfbf;
margin: 0;
}
#Overview td.Detail {
width: 45px;
}
#Overview span {
font-size: 20px;
font-weight: bold;
display: block;
margin-top: 2px;
}
so there is a DIV with a 2px padding on the inside. But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right. I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous. I am not sure what the issue is? edit: screenshot: http://ricebox.whiteazn.com/tabpadding.png I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" is there a problem with placing div tags inside table cells. I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice. is there a problem and/or workaround to using div tags inside a table cell I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? Hi I've been converting my site to start using CSS and am currently working on a transistional layout. It works perfectly in Firefox, but IE 6 has other ideas. At the moment its a fairly simple table, with a Logo at the top and nav bar, content, and then a footer. I want this to fill 100% of the height of the screen (which its doing), how ever there is a mysterious gap under the nav bar , where by the cell decides not to size to the 151px i have told it to do. Instead it creates a hefty gap (i've colour this gray for clarity). I'm not sure if it's something to do with the way I have handled the Nav bar using a list. The link is http://www.cartagteam.co.uk/xhtml2.php to the page with the problem. Thanks I noticed that in Firefox, setting the height to 100% in the style tag attribute, does not work. See code below: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
}
#divider {
cursor: e-resize;
width: 8px;;
background-color: #444444;
vertical-align: center;
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'
//this function gets the original div height
function setPos(e){
//for handling events in ie vs. w3c
curevent = (typeof event == 'undefined' ? e:event);
//sets mouse flag as down
mouseStatus = 'down';
//gets position of click
curPos = curevent.clientX;
//accepts height of the div
tempWidth = document.getElementById('leftMenu').style.width;
//these lines split the width value from the 'px' units
widthArray = tempWidth.split('px');
curWidth = parseInt(widthArray[0]);
}
//this changes the height of the div while the mouse button is depressed
function getPos(e){
if(mouseStatus=='down'){
curevent = (typeof event == 'undefined' ? e:event);
//get new mouse position
newPos = curevent.clientX;
//calculate movement in pixels
var pxMove=parseInt(newPos-curPos);
//determine new width
var newWidth = parseInt(curWidth+pxMove);
//conditional to set minimum width to 5
newWidth = (newWidth < 10 ? 10:newWidth);
//set the new width of the div
document.getElementById('leftMenu').style.width = newWidth+'px';
}
}
function toggleMenu(e) {
e.stopPropagation();
if (document.getElementById('leftMenu').style.display != 'none') {
document.getElementById('leftMenu').style.display = 'none';
} else {
document.getElementById('leftMenu').style.display = '';
}
}
//-->
</script>
</head>
<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
<tr valign="top">
<td id="leftMenu" style="width: 230px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</td>
<td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
<td id="mainContent">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
<p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
<p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
<p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
<p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Can anyone suggest a solution? Hey peeps, my problem is. I have a main table that is 700 px wide and consists of 3 cols and 1 row. Now in the first and last cell i have another table that consists of 1 col and 3 cells. In the Top and bottom cell of both tables i have an image that is 5px wdie * 20px high. In the middle cell i have a 5px wide*1px high background image which tiles in that cell. Now the problem is that the main table will never have a fixed height so i dont know what height to set the cells in the middle. Its sort of a shadow effect i made for my site. I was kind of hoping the there was some way of making the tables height match the height of the cell thats its in. Anyone got any ideas. I figured there would be some css trick i could use? Hope it makes sense. I am trying to set up the following table: Code: <form method='post' action='form.php'>
<table border=0 cellpadding='2'>
<tr>
<td><b>First Name: <font color='red'>*</font></b></td>
<td><input type='text' name='f_name' size=45></td>
</tr><tr>
<td><b>Last Name: <font color='red'>*</font></b></td>
<td><input type='text' name='l_name' size=45></td>
</tr><tr>
<td><b>Telephone Number: <font color='red'>*</font></b></td>
<td><input type='text' name='phone' size=45></td>
</tr><tr>
<td><b>Email Address: <font color='red'>*</font></b></a></td>
<td><input type='text' name='email' size=45></td>
</tr><tr>
<td><b>Website:</b></td>
<td><input type='text' name='website' size=45></td>
</tr><tr>
<td><b>Subject: <font color='red'>*</font></b></a></td>
<td><input type='text' name='subject' size=45></td>
</tr><tr>
<td><b>Message: <font color='red'>*</font></b></td>
<td><input type='text' name='message' size=45></td>
</tr>
<tr>
<td><input type='submit' value='Valuate'></td>
</tr>
</table>
</form>
The next to last td cell (message) I obviously need the height of this cell to be much higher and wider so people can type a message. However, I have tried td rowspan and colspan all with no results. What am I doing wrong? |
|||||||