Table column to stretch height on long page

nbryson · October 17th, 2005, 05:32 AM

Firstly, I am new to web development...so here goes...

(see code example below)I have a table with 5 rows and 3 columns. Basically I want the green rows to stretch when there is a lot of info in the middle (blue cell)

The red cells are to stay fixed height 295px

The problem is that when there is a lot of data in the middle (blue cell) then the red rows expand in height, and they shouldn't. Its the green cells I want to stretch. I think they (red and green cells) stretch proportionately.

To test the example - copy to html page and view. Then paste a lot of text in where it says - Paste a lot of text here - and you will see the problem.

Let me know if you need any further info, I hope I have given enough detail. The problem is in IE.

Thanks

Nickie

Code:

<table>
<tr>
    <td colspan="3" bgcolor="fuchsia">top row, colspan 3</td>
</tr>
<tr>
    <td height="295px" bgcolor="red">1 - 1</td>
    <td rowspan="3" bgcolor="blue">2 - 1

Paste a lot of text here

    </td>
    <td height="295px" bgcolor="red">3 - 1</td>
</tr>
<tr>
    <td height="100%" bgcolor="green">1 - 2</td>
    <td height="100%" bgcolor="green">3 - 2</td>
</tr>
<tr>
    <td height="295px" bgcolor="red">1 - 3</td>
    <td height="295px" bgcolor="red">3 - 3</td>
</tr>
<tr>
    <td colspan="3" bgcolor="fuchsia">bottom row, colspan 3</td>
</tr>

jacob · October 17th, 2005, 05:49 AM

What you are looking for is probably the following style sheet property and value...

Code:

white-space:nowrap;

Therefore, apply the CSS property and value to the table cells which shouldn't wrap.

Hope it helps, Jacob.

jacob · October 17th, 2005, 05:52 AM

Moreover, you say that you are new to web development then you should probably look into style sheets instead of using HTML attributes for styling; e.g. when coloring the cells etc. Try this one...

http://www.google.dk/search?hl=da&q=...rial+CSS&meta=

Jacob.

nbryson · October 17th, 2005, 06:03 AM

Hi

I have got a stylesheet but just didn't use it in this cut down example - I only put the colours in to help describe where the problem was.

Thanks for your prompt response, but I'm not sure what you mean by "table cells which shouldn't wrap" e.g where to put the property white-space.

Cheers

Nickie

jacob · October 17th, 2005, 06:14 AM

Alright, you have a few options, the first and not so beautiful is simply to apply the style to each cell individually, like this...

Code:

<td rowspan="3" bgcolor="blue" style="white-space: nowrap;">2 - 1 Paste a lot of text here</td>

... another way is more flexible. You apply a class to each of the cells that you want to have nowrap on. Therefore e.g.

Code:

<td rowspan="3" class"withoutwrap red">2 - 1 Paste a lot of text here</td>

... and then you have defined the class nwrap in your style sheet with the property, E.g.

Code:

.withoutwrap { white-space: nowrap; }
.red { background-color:#ff0000; }

In this small example I also demonstrated that you can actually have more than one class for each element. You can put the background color in one class and the wrapping in another and apply both to the same element.

Jacob.

(not tested, but should work)

nbryson · October 17th, 2005, 06:30 AM

Hi

The method I'm going to use is the second way you described but I tried both ways and still get the same results. e.g. the red cells still expand.

Nickie

nbryson · October 17th, 2005, 06:34 AM

Hold on - got it working in the small example - let me apply that to the main project and see what happens.

Nickie

jacob · October 17th, 2005, 06:37 AM

When you say expand do you then mean vertically? You have set your height to 295px.

Jacob.

nbryson · October 17th, 2005, 06:44 AM

Hi

Yup - they still expand vertically.

and my mistake i though the example worked but it didn't i still get the same result.

I have got the height set for the red cells but not the blue cells.

Cheers

Nickie

jacob · October 17th, 2005, 07:31 AM

Sorry Nickie, I misunderstood your problem. Now I see what you are trying to do. Unfortunately I have no solution now. It is definately not a nowrap problem!

Jacob.