I want a table to have fixed width but dynamic height because content may be of various length. Here is an example:

I have fixed width but the content is overlapping. What I am doing wrong? Here is my code:

<table width="60%" align='center' cellpadding='2' cellspacing='2' border='2' style='table-layout:fixed'> <thead> <tr> <th>#</th> </tr> </thead> <tbody> ... </tbody> </table> 

And my css:

table{ font-size:12px; }

table td{ padding:5px; height:auto; background:#f6f6f6; } table thead tr th{ background:#d7dbe2; } 

Any ideas how to make the height dynamic?

I want a table to have fixed width but dynamic height because content may be of various length. Here is an example:

I have fixed width but the content is overlapping. What I am doing wrong? Here is my code:

<table width="60%" align='center' cellpadding='2' cellspacing='2' border='2' style='table-layout:fixed'> <thead> <tr> <th>#</th> </tr> </thead> <tbody> ... </tbody> </table> 

And my css:

table{ font-size:12px; } table td{ padding:5px; height:auto; background:#f6f6f6; } table thead tr th{ background:#d7dbe2; } 

Any ideas how to make the height dynamic?