Menu
I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a break in long words then that's OK.
I cannot figure out any way of getting this to work.
This is for an internal client application so needs to work in IE6 and IE7 only.
An example page is below. The cell containing onereallylongword is the offending one.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> td { width: 30px; } </style> </head> <body> <table border="2"> <tr> <td>word</td> <td>two words</td> <td>onereallylongword</td> </tr> </table> </body> </html> 
487
The task is to prevent the text in a table cell from wrapping using CSS. To achieve this we use white-space property of CSS. This property forces the contents of th to display in one line. There are many property values exists to the white-space function.
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.
As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> td { width: 30px; overflow: hidden; } table { width : 90px; table-layout: fixed; } </style> </head> <body> <table border="2"> <tr> <td>word</td> <td>two words</td> <td>onereallylongword</td> </tr> </table> </body> </html> I've tested this in IE6 and 7 and it seems to work fine.
106
If you want to the long text wrapped properly in new lines then in your table id call use a css property table-layout:fixed; otherwise simply css can't break the long text in new lines.
43
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
