Targeting Table Data Cells with "Overflow" and "Word-Wrap"

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)

Throughout Pika there are numerous table (http://www.htmldog.com/reference/htmltags/table/) elements listing data in the system, such as names, addressess, case numbers, and so on. Many of these tables include a clever "flex" table design that enables the width of various table data cells (http://www.htmldog.com/reference/htmltags/td/) to shrink or expand depending on the length of the number of characters in the cell. Typically, this is not a practical problem when the cell content is simple text, which by default automatically wraps to the next line within the boundaries of the td cell. But other types of cell content can be problematic, principally anchor tags (http://www.htmldog.com/reference/htmltags/a/) embedded within table cells.

For example, here is a table listing the results of a document search, with a really long file name at the top, showing how the flex table design adapts to the length of the content in the td cell, with a clickable file name in the first column, and plain text in most of the others:

With a full-width flex table, this presents little or no practical problem. But what if the page element doesn't accomodate a flex table design? Then what happens if the cell width doesn't have enough room to list the full content of the td cell? Here's a Firefox view llustrating the problem at the Pika Documents case record page, in the Document Storage table on the right-side of the page, where the file names break the right border of the page:

One practical solution, of course, is to target the content of the td cell with the {overflow: hidden} (http://www.htmldog.com/reference/cssproperties/overflow/) property value. Using the last example, the contents of the first column cells are structurally clickable anchor tags. To target it, give the td a suitable class name and add this rule to your style sheet:

td.file-name a {
    display: block;
    overflow: hidden;
    }

Voila! The declared width of the td's are now honored, and to the extent the file names "overflow" the boundaries of the td, they are hidden:

Well, yeah, but only in Firefox. If you are using IE, these settings still break the page layout because IE will not honor the overflow property with the element displayed as a block element. What to do?

There is a practical solution: Add the IE-proprietary {word-wrap: break-word;) (http://snipurl.com/l89l) property value to your CSS targeted at the td cell, and then IE behaves with the added advantage that you can now view the full name of the files:

Since other browsers won't recognize the word-wrap property, you can safely add it to the style sheet without any hacks. In final form, the CSS for both Firefox and IE looks like this:

td.file-name a {
    display: block;
    overflow: hidden;
    word-wrap: break-word;
    }