Re: how to restrict the width of long text passages within a table

Posted by GregChapman on Jun 12, 2014; 10:47pm
URL: https://support.nabble.com/how-to-restrict-the-width-of-long-text-passages-within-a-table-tp7590082p7590490.html

Hi nnako,

Further to my email earlier today, I have finally looked at your macro code, but just as important, the image.

This does not show all I need to see. The "Replies", "Last Post" and "Views" column headings that I would expect to see on a "Mixed" application screen are missing, so I can't see exactly what happens. However, I believe the clue is in the code:

<td class="[n.column_default_border/] topics-column nowrap" style="[n.width_style.width/]">

This generates a table cell with the class "nowrap" and guess what the CSS for that class does:

.nowrap {
white-space: nowrap;
}

To see the effect that has look at:
http://www.w3schools.com/CSSref/pr_text_white-space.asp

It could be that simply removing that class from the table has the desired effect for you forum. However, I suspect it is there deliberately to truncate long headings and so keep the "heading bar" to a single line and prevent it growing ever deeper.

Given the change in design that you are making, by adding the description, and to avoid unwanted side effects on other instances where the .avatar-table class might be used, it would probably be better to style the description to:
white-space: normal;
and so over-ride the inherited white-space: nowrap.

Being a bit more of an HTML purist than the good folk at Nabble are, in the ideal world, I would suggest that rather than a sequence of < span> and < br> tags within that avatar-table cell you should code the the heading and description in higher and lower level heading tags, or perhaps, heading and paragraph tags.

There are several good reasons for this:
• it is semantically correct
• A < span> tag produces an an inline box, where as headings and paragraphs are block tags so default to new lines - which is what you want for this particular content.
• You can write more understandable CSS using conditional selectors, that don't required a host of "pick and mix" classes.
• Search engines rank headings and paragraphs higher then mere table cell data.

(Incidentally, you've written XHTML-style < br> tags when Nable serve an HTML4.01 TRANSITIONAL page, so, technically, is wrong, although all browsers I know cope with such coding errors)

As a further BTW, I rate a lot of the HTML that Nabble uses as pretty dire. The table.avatar-table is a case in point. A single celled table is a semantic meaningless nonsense. It simply shouldn't be there. What is worse, this single celled table is nested within another table. It is utterly and completely redundant. The only reason for it being there is to confuse.

It is easy to see that all the style coding has been done visually, when all tutorials on CSS say ID and class names should be functional NOT descriptive  - just look at all those class names - "shaded-background-color" and "medium-border-color" and "nowrap" pepper the code. When you you really need is a division wrapping the page with an ID "macro-view-mixed" with the default styling set for the defaults for the page and the odd class for the row or column exceptions "category-row", "heading-row", replies-column" and the like. (if heading rows are to have shaded backgrounds the code should be included in the heading row code, not added on as a decorative afterthought.)