forcing cell to be 25px wide
Moderator: General Moderators
forcing cell to be 25px wide
i'm setting a background for a table cell
i set a width of cell equal to width of background(=25px)
but after i check the result the cell is wider than 25 pixel...
what can i do to make it use my 25px?
i set a width of cell equal to width of background(=25px)
but after i check the result the cell is wider than 25 pixel...
what can i do to make it use my 25px?
here is the code:
html:
css:
html:
Code: Select all
<table id="main" border="1">
<tr>
<td id="top" colspan="3">row 1</td>
</tr>
<tr>
<td id="left"></td>
<td><img src="images/pic.jpg" /></td>
<td id="right"></td>
</tr>
</table>Code: Select all
body{width:100%}
#main{width:100%;border-collapse:collapse;}
#top{width:100%;}
#left,#right{
width:25px; background-repeat:repeat-y;
background-image:url(images/b.png)}-
jollyjumper
- Forum Contributor
- Posts: 107
- Joined: Sat Jan 25, 2003 11:03 am
table cells are very unique elements
they arent really block level or inline, they are table cells lol
setting a width on a cell is not always "final", it could be squished down still
but this will work, because a div IS a block level element, and when you set a width on it, it will be at least that width no matter what
they arent really block level or inline, they are table cells lol
setting a width on a cell is not always "final", it could be squished down still
but this will work, because a div IS a block level element, and when you set a width on it, it will be at least that width no matter what
Code: Select all
<head>
<style type="text/css">
body{width:100%}
#main {
width:100%;
border-collapse: collapse;
}
#top { width:100%; }
#left div, #right div {
width:25px;
background-repeat: repeat-y;
background-image: url(images/b.png);
}
#center { width: 100%; }
</style>
</head>
<body>
<table id="main" border="1">
<tr>
<td id="top" colspan="3">row 1</td>
</tr>
<tr>
<td id="left"><div></div></td>
<td id="center"><img src="images/pic.jpg" /></td>
<td id="right"><div></div></td>
</tr>
</table>-
jollyjumper
- Forum Contributor
- Posts: 107
- Joined: Sat Jan 25, 2003 11:03 am
Hi,
Well this is just my opinion, but I've never been a fan about colspan and rowspan. I always have experienced unexpected things with it.
To take your example, I would have build it this way:
The first table has 2 rows with each 1 cell, and the 2nd row is split into 3 columns.
It should create the same result as you would expect with a colspan.
Greetz Jolly.
Well this is just my opinion, but I've never been a fan about colspan and rowspan. I always have experienced unexpected things with it.
To take your example, I would have build it this way:
Code: Select all
<table id="main" border="1">
<tr>
<td id="top">row 1</td>
</tr>
<tr>
<td width="100%">
<table border="1" width="100%">
<tr>
<td id="left"></td>
<td><img src="images/pic.jpg" /></td>
<td id="right"></td>
</tr>
</table>
</td>
</table>It should create the same result as you would expect with a colspan.
Greetz Jolly.
i'm back with more table problems...
html
------
css
-----
[the problem
i'm putting a fixed size picture as background inside #cell1 and i put another tiled background into #cell2.
the thing is that despite i fix height:100% for #tbl1, the table doesn't strech to occupy #left completly.
i checked this with seting #left's background to red and #tbl1's to yellow...
what i see is that #left cell colored completly in red while #tbl1 is not...
the pictures says it all:

any help is appreciated....
i killed many hours on trying to solve this problem,playing with dimensions, but no luck so far...
html
------
Code: Select all
<table id="main" border="1" cellpadding="0">
<tr>
<td id="left">
<table border="1" cellpadding="0" id="tbl1">
<tr><td id="cell1"></td></tr>
<tr><td id="cell2"></td></tr>
</table>
</td>
<td id="middle"></td>
<td id="right"></td>
</tr>
</table>-----
Code: Select all
#main{width:100%;} /*main table*/
#left{vertical-align:top;width:35px;}
#tbl1{width:100%;height:100%;} /*nested table streched to occupy #left*/
#cell1{height:100px; background-position:top left;
background-repeat:no-repeat; background-image:url(images/picr.png)} /*height in pixels*/
#cell2{background-repeat:repeat-y; background-position:top left;
background-image:url(images/back.png)}
#middle{height:200px;}
#right{width:35px;}i'm putting a fixed size picture as background inside #cell1 and i put another tiled background into #cell2.
the thing is that despite i fix height:100% for #tbl1, the table doesn't strech to occupy #left completly.
i checked this with seting #left's background to red and #tbl1's to yellow...
what i see is that #left cell colored completly in red while #tbl1 is not...
the pictures says it all:

any help is appreciated....
i killed many hours on trying to solve this problem,playing with dimensions, but no luck so far...
Try this
My recommendation for what it is worth:
1. don't try using the "height" parameter.
2. In order to fill the height problem you have to have at least two tables. One table the structure table that has the background image/ color that stretches with the rest of the data/content and another inside of that that is controlled.
3. I suggest using align, height, width parameters in your <td> tags as opposed to using CSS for it.
I just spent my day tackling a similar problem....
1. don't try using the "height" parameter.
2. In order to fill the height problem you have to have at least two tables. One table the structure table that has the background image/ color that stretches with the rest of the data/content and another inside of that that is controlled.
3. I suggest using align, height, width parameters in your <td> tags as opposed to using CSS for it.
I just spent my day tackling a similar problem....
i tried to move all widths and heights attributes to html tags but this doesn't help either...
what i managed to discover so far that if i set height:100% for #left(this is the cell that contains table) then firefox streches
#tbl1 to occupy entire #left but NOT IE...
(the strange thing is that without setting height:100%, i ran ff's dom inspector tool to see the actual height of #left and it is as it should be:the same as #middle's...but #tbl1 isn't streched to full height of #left)
what i managed to discover so far that if i set height:100% for #left(this is the cell that contains table) then firefox streches
#tbl1 to occupy entire #left but NOT IE...
(the strange thing is that without setting height:100%, i ran ff's dom inspector tool to see the actual height of #left and it is as it should be:the same as #middle's...but #tbl1 isn't streched to full height of #left)
Not suprised about IE not using height tags to expand tables. I ended up using an outer table and two inner tables to achieve a similar affect.
I'm suggesting using the table properties in the spirit of KISS (keep it simple stupid)
. Honestly I don't trust the css positioning stuff that well. Besides is this something you'll use more than once? Somewhere else on the page? If not what's the point in using CSS if table tags will do the job?
Keep trying you'll figure out a way!

I'm suggesting using the table properties in the spirit of KISS (keep it simple stupid)
Keep trying you'll figure out a way!
i'll start fresh (just forget everything above this post)
i wrote another test code and picture along with it explaining the problem...

css
----
yellow line on picture is what i'm trying to achieve...
i wrote another test code and picture along with it explaining the problem...

Code: Select all
<table id="maintable" border="1" cellpadding="0" cellspacing="2" width="50%">
<tr><td id="parent" width="150">
<table id="nested" border="1" cellpadding="0" cellspacing="2" height="100%">
<tr><td id="topcell" height="80" width="100"></td></tr>
<tr><td id="bottomcell"> </td></tr>
</table>
</td>
<td height="300">right cell</td></tr>
</table>----
Code: Select all
#parent{background-color:#f00;vertical-align:top}
#topcell{background-color:#00f;}
#bottomcell{background-color:#0f0;}