Fixed Table Column Width

[sockerdad]

I am trying to format output and am having a considerable tough time getting the columns on my table to "stay" the set width.

The maximum field length is known for all table columns.  For example, the maximum number of characters for column 1 is 12 - it will NEVER be more.  However, when I try populate the column with the data - which can be anywhere from 3 to 12 characters, the column "flexes" back and forth so that nothing lines up the way I want it.

How do you set your columns to a specific "px" or "em" setting and hve CF stick to it, regardless of whether the data in the column is 12 characters or 3?  I've tried using LJustify/RJustify and have verified the field size to be 12, but once it hits the table, the spaces are dropped.

Sigh.

The output is perfect, the presentation sucks.

[Adam Cameron.]

How the browser renders your mark-up is nothing to do with CF, per se, it's down to what mark-up your code generates, and what rules the W3C have recommended as to how browsers should render certain mark-up.

So this is more an HTML question as far as I can gather, and perhaps not "in scope" for these forums.

But here we all are, so we might as well take a look.  What mark-up is your code generating?  We can have a look @ it and try to work out why it's not rendering the way you expect it it...

--

Adam

[ilssac]

As Adam said, this is an HTML issue, not a CFML issue.  In normal HTML, the HTTP standard is to always collapse multiple white space characters unto a single space character.

If you do not want this to happen, you have to tell the browser to NOT do this.  The HTML way to accomplish that purpose is the <pre>...</pre> tag block.

I.E. wrap all that carefully built space aligned content in <pre></pre> tags and you should get much more desirable results.

<pre>
   1   2   3
   4   5   6
   7   8   9
</pre>

[sockerdad]

Yes, the <pre></pre> formatted the line perfectly...until I had to go to a new line.  Then the <br /> put

two blank lines between the desired lines of text:

CONVICTION   * 02/26/04 03/24/04 VBR                  V C 116953  C-ZZZZZ  xxxx

                          
      CMV HAZ ACT SPD 048 DESIG/POST SPD 30                       AA   

How do you prevent the extra blank lines?

[ilssac · Accepted solution]

sockerdad wrote:

How do you prevent the extra blank lines?

Realize that inside of a <pre>...</pre> block you are using TEXT formating not HTML formating.  So just put text linebreaks and carriage returns.

Most likely just by putting them into your source code, but you could use chr(13) chr(10) functions if you want something more programmatic.

When you are inside a <pre></pre> block, you are formatting your text just as you would do in notepad or vi or other basic text editor.

[Dan_Bracuk]

Apparently the width attribute of <td> is deprecated, but you can always write some css for this.

Bear in mind though that what you see on your monitor is not necessarily what others will see on theirs, for a variety of reasons.