Menu
I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
432
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.
The trick is to use the CSS property table-layout. It can take three values: auto , fixed , and inherit . The normal (initial) value is auto , which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string. Syntax: text-overflow: clip|string|ellipsis|initial|inherit; Example: In the following example,we will consider ellipsis to use the test-overflow property in a table cell.
To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.
found the solution here:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
The trick is to use the CSS property
table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.What you want to use is
table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero.Next is deciding what to do with the content that doesn’t fit in the table anymore. If the table only contains text, word-wrap:break-word (word-wrap is specified in the CSS3 Text Effects Module) will force the browser to break words as necessary to prevent overflow.
119
As user384080 mentioned, table-layout:fixed should be added. However, merely having table-layout doesn't always fix the problem. Please make sure that you add the width attribute as well:
<table style="width:100%;table-layout:fixed">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
