asked on

html table fixed height

I have a table that is inside a div with an aboslute position. Let's say this table fits 4 rows comfortably at a font size of X. If I have 8 row's, it'll will make the row's a little bit smaller but I still do not see every row. Some of the rows cut off. So let's say I only see 6 rows on the page. I'm trying to get it so all the row's show in this space no matter how many row's I add without adjusting the font. So if it cut's off the text that's fine. This is all based on percentages so I can assign a magical fixed height number to each row. Any idea's?

BogoJoker

I just played around with tables a little and I am not sure that I understand your problem completely. Can you post a link to the example, or a simplified version.

Joe P

gwkg

do you have a height set on the absolutely position div? You can control overflow on the div with overflow:

div#whatever {

position:abosolute;
overflow:visible;

}

The possible values are

visible      Default. The content is not clipped. It renders outside the element
hidden       The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
scroll       The content is clipped, but the browser displays a scroll-bar to see the rest of the content
auto       If the content is clipped, the browser should display a scroll-bar to see the rest of the content

Heres a page where you can experiment and see the changes in real-time:
http://www.quirksmode.org/css/overflow.html

cophi

ASKER

gwkg is on the right track to what I am trying to understand, basically right now I do not have overflow and I do NOT WANT overflow though. I want a table so if it builds and it has to many elements(rows), I don't want one of the rows to be cut off in the middle. I'd either like to see all the rows show in the definied space of the absolute div, or only the ones that can fit. How do I accomplish this?

gwkg

If you do not have a height or width assigned to the div, the it will stretch to fit your table. You need to post a link or your code if something else is interfering with the div and hiding your table.

cophi

ASKER

If I have code like below, now this code does not have a problem, but let's say I add 10 more rows to this row, when you display it in html, its not gonna automatically adjust them for you, I will only like 4 or 5 rows. I want to see all 10 rows though, even if they are cut off a little bit.

<div style="position: absolute; width: 490px; height: 30%; z-index: 3; left: 301px; top: 59px; padding-top: 0pt" id="layer3"><table bgcolor="#000000" border="0" height="100%" width="100%">
<tbody>
<tr height="40">
<td colspan="4" style="font-size: 210%;" align="center" bgcolor="#FF9933">
<font color="#000000" face="Arial">BLAH</font>
</td>
</tr>
<tr>
<td style="font-size: 180%;" bgcolor="#000000" width="52%">
</td>
<td style="font-size: 100%;" bgcolor="#000000" width="16%">
<font style="" color="#FF9933" face="Arial">ONE</font>
</td>
<td style="font-size: 100%;" bgcolor="#000000" width="16%">
<font style="" color="#FF9933" face="Arial">TWO</font>
</td>
<td style="font-size: 100%;" bgcolor="#000000" width="16%">
<font style="" color="#FF9933" face="Arial">THREE</font>
</td>
</tr>
<tr>
<td style="font-size: 160%;" bgcolor="#000000" width="52%">
<font style="" color="#ffffff" face="Arial">CAR</font>
</td>
<td style="font-size: 160%;" bgcolor="#000000" width="16%">
<font style="" color="#ffffff" face="Arial">A</font>
</td>
<td style="font-size: 160%;" bgcolor="#000000" width="16%">
<font style="" color="#ffffff" face="Arial">B</font>
</td>
<td style="font-size: 160%;" bgcolor="#000000" width="16%">
<font style="" color="#ffffff" face="Arial">C</font>
</td>
</tr>
</tbody>
</table>
</div>

ASKER CERTIFIED SOLUTION

gcmachel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial