CODEWITHSUNDEEP
htmlcsshtml-tablewidth
daniel
daniel

Reputation: 3115

Prevent text from overlap table td width

How can I restrict the table <td> entry to expanding over the entire screen when the entry is too long?

Upvotes: 32

Views: 97382

Answers (5)

Experimenter
Experimenter

Reputation: 2478

There is also nice solution with property max-width: 0px; so it will be responsible to full width of table.

Upvotes: 3

Dairy Window
Dairy Window

Reputation: 1425

You need to specify BOTH the max-width and display styles (because the display attribute is set funny because it's a td, not a normal element) e.g.

td{
    max-width: 100px;
    display: inline-block;
}

Upvotes: 3

Phoenix
Phoenix

Reputation: 4536

Well, there's max-width, max-height, and overflow in CSS.

So

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

would restrict the maximum width and height to 150px, and it can be anything from less than 150 up to 150, and anything that doesn't fit inside that will be clipped off and hidden from view.

Overflow's default (overflow: visible;) is to simply allow anything that won't fit inside its specified container to just spill over outside of it. If you only want to limit it horizontally and don't want to hide anything, word-wrap may help:

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

word-wrap will break words whenever it needs to, even if it's not at the end of a word. You can also just use height and width to specify a fixed size if you don't want the table to expand or shrink at all.

Upvotes: 58

lavelle
lavelle

Reputation: 1546

td.whatever_class{
    max-width: 100px;
}

replace 100px with however wide you want. 1000px is a good width for websites as it will fit on nearly all monitors people have today, so if you had 20 columns then make it 50px for example.

Upvotes: 7

Floern
Floern

Reputation: 33904

You could use word-wrap:break-word;, so overlong words get wrapped.

Upvotes: 17

Related Questions