Create HTML table with fixed width columns with CSS

Question

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?

what behavior do you want when the content exceeds the width of a cell column? a: Stretch the cell, or b: Hide the extra content? (e.g. if your contents contains a large string value with no spaces or other punctuation to wrap on) — scunliffe
– scunliffe, Commented Nov 25, 2010 at 11:11

DarkLeafyGreen · Accepted Answer · 2010-11-25 11:50:35Z

4

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

This worked for me ;)

answered Nov 25, 2010 at 11:50

DarkLeafyGreen

70.6k136 gold badges394 silver badges618 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PeeHaa · Accepted Answer · 2013-03-25 12:41:23Z

1

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.

edited Mar 25, 2013 at 12:41

answered Nov 25, 2010 at 11:10

PeeHaa

73.1k60 gold badges195 silver badges264 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2010-11-25 11:13:39Z

0

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

answered Nov 25, 2010 at 11:13

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

Zach Shallbetter · Accepted Answer · 2010-11-25 18:48:22Z

0

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

answered Nov 25, 2010 at 18:48

Zach Shallbetter

1,9216 gold badges23 silver badges38 bronze badges

Collectives™ on Stack Overflow

Create HTML table with fixed width columns with CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related