table rows not adjusting at all columns

[ketanco]

Hello,

Please see table at the bottom of the page

http://www.tuterconstruction.com/about.html

The rows are not increasing in height automatically, if I have an entry long enough at another column, to cause that row to increase in height.

How can I correct this?

I am pasting the css code of the table below:

/* START table styles */
.tbl {
float:left;
margin-top:10px;
width:100%;
}
*:first-child+html .tbl { /* this applies only to ie7 */
margin-bottom:10px;
}
.tbl td {
float:left;
}
.tbl tr td {
padding:4px 0 4px 14px;
}
.tbl tr .td-1 {
width:116px;
}
.tbl tr .td-2 {
width:105px;
}
.tbl tr .td-3 {
width:98px;
}
.tbl tr .td-4 {
width:120px;
}
.tbl tr .td-5 {
width:128px;
}
/* END table styles */

[sunfighter]

.tbl td {
	float:left;
}

Causes a lot of your problems

.tbl {
	width:100%;
}

Also causes some.

Your table looks better if the entire styling you posted is removed

PS - use &gt; and &lt; for > and < in the tables. ex =

<td class="td-3">10M-20M&lt;</td>

[resdog]

tables are naturally setup to "float left", since each td is next to the one before it. So specifying the float: left is what is causing the table td's not to be the same height.

[ketanco]

tables are naturally setup to "float left", since each td is next to the one before it. So specifying the float: left is what is causing the table td's not to be the same height.

thanks this resolved it i removed the float left. however i am not still clear how it resolved it. just for my learning...

[ketanco]

.tbl td {
	float:left;
}

Causes a lot of your problems

.tbl {
	width:100%;
}

Also causes some.

what do you mean by this? just for my learning. especially by width 100% causing some?

[LRM]

About the float. It essentially "breaks" that element (in this case the cell) out of the container. It may as well just be a div on its own at that point, with a height based on the contents. Simply put, don't use floats on rows or cells in a table - they break.

The width 100% comment was because you are defining the width of all of the columns and as such already defining the total width the table can have. The total of those columns may or may not be equal to the total width of the container the table is in but since you are telling the table to stretch beyond that width if it wasn't wide enough already the browser will adjust the column widths as it needs - making the defined widths worthless.

That's not to say you can't use a width 100% on a table. If you do you just can't define all the column widths. At least one has to be left undefined for the system to adjust as needed to fit the table to the full width to of its container.

[ketanco]

got it. thanks