Create HTML table with fixed width columns with CSS

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>
        <t开发者_如何学编程r>
            <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?

table td{
    word-wrap:break-word;
}

This worked for me ;)

I suspect there are no 'breaking points' (e.g. spaces) in the text. So the text cannot be broke into mulitple lines. One solution would be to add ­ at the places the text may break.

The problem may be caused by your use of table-layout: fixed - I would suggest putting style="width: 150px;" in each of the <th> tags and removing the table-layout

The <th> width tends to supersede <td> widths. So simply applying a width to the <th> (as Kolink said) should solve your overflow problem.

table thead tr th{
    width:120px; 
}