Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 10th, 2003, 10:47 AM
Authorized User
 
Join Date: Jun 2003
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default Fixed height cells in tables

Hello all-

I'm having a problem getting a table on one of my pages to come out right and I think I've found the simplest instance of my problem.

The code below is a simple table with 3 cells, 2 along the left side and one that spans 2 rows on the right. I've colored all the cells in this example very brightly so you can see what I'm talking about.

In this code the upper left cell's height is fixed (or should be fixed) at 20 pixels. The lower left cell has no specified height. The idea is that the lower left cell should become taller as the text in the large cell grows. ie the upper left cell should stay fixed at 20 and the lower left cell should expand to make up the difference (or at least that's what I want it to do).

As you can see if you save this code to a file and open it with IE, the upper left cell is much longer than 20 pixels. Does anyone know how I can make the upper left cell stay fixed and have the rest of the table strech to accomodate the text in the large cell? Am I missing something obvious? I've only been working with HTML for a little while now.

Thanks in advance,
Mike

Code:
<html>
<body>
<table>
    <tr> 
        <td width="100" height="20" bgcolor="#FF0000">&nbsp;</td>
        <td width="500" rowspan="2" bgcolor="#00FF00">
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
        </td>
    </tr>
    <tr> 
        <td bgcolor="#0000FF"></td>
    </tr>
</table>
</body>
</html>
 
Old July 11th, 2003, 01:15 AM
Authorized User
 
Join Date: Jul 2003
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to bosboom
Default

I think a nested table is the answer to your problem:

Code:
<html>
<body>
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td width="100" valign="top">
        <table cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td width="100" height="20" bgcolor="#FF0000">&nbsp;</td>
          </tr>
        <tr> 
            <td bgcolor="#0000FF">&nbsp;</td>
        </tr>
        </table>
        </td>
        <td width="500" rowspan="2" bgcolor="#00FF00">
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
        </td>
    </tr>
</table>
</body>
</html>
Greetz

Bosboom






Similar Threads
Thread Thread Starter Forum Replies Last Post
Fixed table height and row height rajanikrishna HTML Code Clinic 3 January 18th, 2007 12:42 AM
Fixed tables and/or fixed bkgrnd in tables slg111875 Dreamweaver (all versions) 1 June 22nd, 2006 02:31 PM
How to display big sentences in tables/cells karib Dreamweaver (all versions) 2 November 1st, 2004 04:00 PM
how to set row height(fixed to 1 pixe) in DataGrid yoganand03 General .NET 1 May 5th, 2004 09:46 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 09:14 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.