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 badges617 bronze badges

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

Comments

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

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.

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

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

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

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

Collectives™ on Stack Overflow

Create HTML table with fixed width columns with CSS

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related