Entry: Word-wrap in HTML tables and DATAGRIDS ASP.NET Monday, April 12, 2004



Today I learnt a very frustrating thing with HTML tables

HTML tables TD cells don't obey wrap attributes or FIXED width settings for content with continuous text without spaces.
The text within cells only wraps if there are spaces

Here is a table with center colum of fixed width of 50 px.

     
     
     

Same table with some text in the fixed width cell that is within it.

    abcdef  
     
     

Now the text with some spaces and see it wrap.

    abc def ghi jkl mno pqr  
     
     


Now the text without spaces and see it exceed it's fixed width limit.

    abcdefghijklmnopqr  
     
     

The problem is because the word does not wrap as it is one big one.

The solution for this is to add the CSS style attribute break-word to the TD cell which has fixed width. like style="word-wrap:break-word"
After that it wraps nicely.

    abcdefghijklmnopqr  
     
     


All of these are also needed if you use Datagrids in ASP.NET.

To make a datgrid column word-wrap use the style attributes in the column template or if you are auto generating the columns use,

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

e.Item.Cells([INDEX]).Style.Add("word-wrap", "break-word")
e.Item.Cells([INDEX]).Attributes.Add("width", "250px")
End sub

where index is  the column index for which you want to set the wrap property.

   1 comments

Rob
February 28, 2005   03:19 PM PST
 
First time I ever did a search for a solution and found the answer on the first page of the first search... That has to be a record.

Leave a Comment:

Name


Homepage (optional)


Comments