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!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Does a wildcard operator exist to make a cell expand to table width? 1

Status
Not open for further replies.

michellerobbins56

Programmer
Jan 10, 2006
89
GB
Hi there.

Please can someone help me. I have an image which I am going to use as a background to a cell. I am using this image as a 'pixel' image which I want to expand to the width of the table that the cell is within automatically. The table width is set using 100% (so if a user's screen adjusts so does the table - and ideally the cell will too. I assume the width of this cell must use some kind of wildcard operator? How is it possible to make the cell expand to the table width automatically and please can anyone provide a brief example of the syntax?

Thank you very much for any help.
 
To clarify, when I say above, I want the cell to expand to the table width - I mean expand to the 'available' table width, as there may be other cells taking up a percentage of the space. I just need the cell which contains the single pixel image to expand to fill any available space remaining.
 
Don't define any specific width for the cell,just leave it
blank the cell will expand to fill the remaining space,
Given all other cells have a specific width.

If the other cells don't have a specific width then this will not work as the available space is distributed evenly among the cells.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
What are the other cells?
If I understand your explanation, I think the best option(s) would be either:[ol]
[li]cell width=xx% on all cells in that row (best if you have content in the other cells) or[/li]
[li]cell width=xx on the surrounding cells and, as vacunita said, allow this cell to take up any remaining space (best if the other cells contain border, or other fixed-width, images/data).[/li][/ol]




I hope this helps;
Rob Hercules
 
I'll blindly shoot straight past everyone else here and ask something: Are you using your table for tabular data? If not, have you considered other, more appropriate elements?
 
Hmmm...Vrag's right, maybe some DHTML layers/iframes would be more in order here?




I hope this helps;
Rob Hercules
 
I am using the table for tabular data. The other cells are simply cells that contain either text or an image. There are two rows. The bottom row is the longest and there are only two cells in the top row. One of the cells in the top row I have given a fixed width and the other cell is the one I want to fill up the remaining space (up to the width of the bottom row) with the single pixel image - so this image is 'stretched' to fit the remaining space. Is a wildcard operator available? I don't really want to assign fixed widths to any cells where possible, as I need the table to adjust if a user reduces their screen/window size.

Thank you for any help.
 
I don't really think that is tabular data, but if you say so, I have to believe you. Have you thought of tiling the image as a background across the cell? I can't see how stretching would give you a better solution than tiling. If you need to stretch, you can just put an image inside the cell and give it a width of 100%. That will stretch it across the whole cell.

And as for the cell, in a fixed width table with two cells, if the first cell has fixed width, the second cell will need to expand to fill all available space.

Still I think a two row table sounds like a misused table.
 
One of the cells in the top row I have given a fixed width and the other cell is the one I want to fill up the remaining space (up to the width of the bottom row)
That's precisely what it will do anyway, you don't need any special syntax.

[The] image is 'stretched' to fit the remaining space.
That's more tricky. It's also a bit pointless - you can do it much more simply with background images:
Code:
<td style="background: url(/images/blue.gif);"></td>
But if it's only one pixel, why use an image at all? Why not just specify a colour?
Code:
<td style="background: blue;"></td>
Obviously, you can put that CSS in a stylesheet rather than inline.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
I think Chris caught something the rest of us should've there...a 1px image is rather pointless as a [tt]style="background: [red]color[/red];"[/tt] operator can do anything a 1px img can, and with less coding involved...a BIG plus.

Thanks Chris, good catch.




I hope this helps;
Rob Hercules
 
Chris is right, the 1px image is pointless.

However, going back to the expanding cell.

There are two rows. The bottom row is the longest and there are only two cells in the top row.

If what you want to do is make the top cell take up the entire space of the bottom row minus one cell you can add [blue]colspan[/blue] attribute to the cell in question.

as an example:
This table has 2 rows, one has 23 cells the other one has 4 cells.
Code:
<table>
<tr><td [red]colspan='3'[/red]></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></td>
</tr>
</table>

With a colspan of 3 in the top cell, it will take up the space of the 3 bottom cells, so the table will look like this:

*******************************
* Cell one * cll 2*
*******************************
* c1 * c2 * c3 * c4 *
*******************************

Is that what you want?

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
My ascii pictre got screwed up, i'll show a picture instead.

table.jpg



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
vacunita:

your ASCII pictures should come out better if you put them inside [ignore][tt] [/tt][/ignore] tags. Dave gave us those tags for just that reason. :)




I hope this helps;
Rob Hercules
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top