CODEWITHSUNDEEP
htmlcsshtml-table
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

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:

alt text

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?

Upvotes: 2

Views: 19262

Answers (4)

PeeHaa
PeeHaa

Reputation: 72672

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 &shy; at the places the text may break.

Upvotes: 1

Zach Shallbetter
Zach Shallbetter

Reputation: 1911

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; 
}

Upvotes: 0

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

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

This worked for me ;)

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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

Upvotes: 0

Related Questions