Menu
Sometimes when a piece of data in one of my table cells is too long it stretches the cell and deforms the layout of the entire table. how can i prevent this?
673
Click on the “Table” tab. Click the “Options” button. On the “Table Options” dialog box, in the “Options” section, click the “Automatically resize to fit contents” check box so there is NO check mark in the box. Click “OK”.
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.
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.
You probably want table-layout:fixed and set width on the first cells of a row.
See http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout for detailed explanation.
116
I just had the same problem and ended up solving it with this:
table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ } Apparently, setting the table width to something very small forces it to break text up and take less horizontal space. Words will not be broken though, so the table will end up being at least large enough for the largest word of each column.
Tried tested and true on:
Linux (Ubuntu 10.04)
Windows:
If someone (I can't in my present situation) could test this on latest versions of IE, Firefox, Chrome, Safari and Opera and leave a comment or edit this answer, that would be awesome!
30
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
