Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 740
daniel Avatar asked Jan 08 '11 21:01

daniel


People also ask

How do you stop a cell from expanding in a table?

To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.

How do you reduce the width of a TD table?

By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.

How do you change the width of a TD table?

To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively. Just keep in mind, the usage of style attribute overrides any style set globally.


3 Answers

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.

like image 148
Phoenix Avatar answered Sep 24 '22 18:09

Phoenix


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

like image 25
Floern Avatar answered Sep 20 '22 18:09

Floern


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.

like image 40
lavelle Avatar answered Sep 22 '22 18:09

lavelle