Problem controlling column widths

Forum Moderators: open

Message Too Old, No Replies

Problem controlling column widths

Mister_L

11:36 pm on Nov 11, 2009 (gmt 0)

Hi Everyone,

I have a table with two columns that is filled with dynamically generated content.Although I specified the exact width of the table as well as the width of two top cells (in a way that makes sense),for some reason I always get that one column is a bit wider then the other.I'm using the width attribute for <table> and for <td>.Maybe something is wrong with css but I can find what it is.

Looking forward to hear some advice.

Thanks.

swa66

12:52 am on Nov 12, 2009 (gmt 0)

You might try to set your table to fixed layout instead of the automatic (default) layout. Never tried myself though so I've no idea how browsers react to it.

Basically browsers that support CSS2.1 properly should have 2 different algorithms to calculate the width of columns. Default is auto, but there is a fixed one that does not take into account the content in the cells.

[w3.org...]

rocknbil

7:07 pm on Nov 12, 2009 (gmt 0)

If you have nowrap on one of the columns (or set css for white-space:nowrap) and the content exceeds that, this will generally take precedence over any settings you have for td width="1234" or <table width="5678">. That's most likely the problem.

Mister_L

12:50 pm on Nov 13, 2009 (gmt 0)

I'm not using nowrap and the fixed table layout didn't produce good results.The thing is that with static content it works fine.Bellow is my code.If someone can copy it and test it with dynamic content it will be most appreciated.

.wid{border-bottom:solid 1px #fff; }

.lbdr{border-left:solid 1px #fff; }

#col2{

padding-left:31px;
padding-right:19px;
float:left;
width:490px;

}

.box{

background-color:#F1F0EE;
margin-bottom:11px;
border-bottom-width:5px;
border-bottom-style:solid;
border-bottom-color:#1a5dad;
padding:10px

}

#products td.link{

text-align:right;
vertical-align:bottom;
height:10px;

}

td.des_text {
height:110px;

}

#products .pic{

width:75px;

}

a.blue{color:#004EFF; font-weight:normal;}

.img{

border:5px solid #a3bad4;

margin-right:0px;

vertical-align:top;

}

.product-head {

font-weight: bold;
padding-left:3px;
padding-right:3px;

}

.fl{

float:none;

}

</style>
</head>

<div class="box">
<h2>top rated products</h2>

<table id="products" border="0" cellpadding="5" cellspacing="0">
<tbody><tr>
<td width="50%" class="wid"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tbody><tr>
<td class="pic"><a href="types/product-5.html"><img src="image URL" alt="product" class="img fl" width="90" height="90"></a></td>
<td class="product-head" valign="top">Description title of about 8 words</td>
</tr>
<tr>

<td colspan="2" class="des_text" valign="top">
Description text of 25 words ...
<br><br>
</td>
</tr>
<tr>
<td colspan="2" class="link"><a class="blue" href="types/product-5.html">More details </a></td>
</tr>
</tbody></table></td>

<td class="wid lbdr"><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tbody><tr>
<td class="pic"><a href="types/product-11.html"><img src="image URL...." alt="product" class="img fl" width="90" height="90"></a></td>
<td class="product-head" valign="top" align="left">Description title of about 8 words</td>
</tr>
<tr>
<td colspan="2" class="des_text" valign="top">
Description text of 25 words ...
<br><br>

</td>
</tr>
<tr>
<td colspan="2" class="link"><a class="blue" href="types/product-11.html">More details </a></td>
</tr>
</tbody></table></td>
</tr>

</tbody></table></div>
</div>

</body>
</html>