pre-formated text with scroll bars at 100% width

em***@collectivestudios.com (Emil Dotchevski) wrote:

I have a table that is at 100% width, which contains a <TD> that is
80% of that.
I have a feeling that you are using a table for layout in a manner that
could be replaced easily by the use of CSS.
In the <TD> I want to put pre-formatted text (the output
from a C++ compiler, to be more precise) and I'd like the text to use
scroll bars if it does not fit.
You cannot do such things in HTML in any convenient and useable way,
though some people might suggest that you use <iframe> or "normal"
frames; the latter would be suggested as an overall page design
"solution", whereas <iframe> could actually appear inside a cell.
I can't get this to work, no matter what combination of <PRE>, width,
and style I try. Any help greatly appreciated.

Well, you didn't actually describe what you tried.

But the width attribute of <PRE> is not much supported, and it's
defined meaning is not related to scrolling, so it was somewhat futile
if you tried that.

The natural approach, in the modern world, is to use CSS. The details
belong to c.i.w.a.stylesheets, but just to give an idea: if this is the
only table element on the page, you could use

<style type="text/css">
table { table-layout: fixed; }
table pre { width:100%;
overflow: auto;
line-height: 1;
height: 11em;
margin: 0; }
</style>

where the number 11 is to be replaced by a number that is the number of
lines in the <pre> element plus one. (The plus one comes from a guess
of how much vertical space the horizontal scroll bar needs.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Yes, I am using CSS, and overflow: scroll. Here is what I tried:

<table width="100%">
<tr>
<td width="20%">Compiler Output</td>
<td width="80%">
<pre style="WIDTH: 100%; overflow: scroll">
c:\program files\microsoft visual studio .net
2003\vc7\include\xtree(1116) : warning C4702: unreachable code
c:\program files\microsoft visual studio .net
2003\vc7\include\xtree(1117) : warning C4702: unreachable code
c:\program files\microsoft visual studio .net
2003\vc7\include\xtree(1118) : warning C4702: unreachable code
c:\program files\microsoft visual studio .net
2003\vc7\include\xtree(1119) : warning C4702: unreachable code
c:\program files\microsoft visual studio .net
2003\vc7\include\xtree(1121) : warning C4702: unreachable code
</pre>
</td>
</tr>
</table>

What I want it to look like is this: a table with 100% width, with one
row, two cells: one 20%, the other 80% of the table width. The one
with 80% width I want to have scroll bars and display the <pre> text.
I do not want the table to overflow the browser window.

This works fine in Netscape. It does not work in IE.

I tried to put the <pre> out of the table and specify
style="width:100%" and it worked fine. Somehow the fact that it is
inside a table breaks it.

Any help appreciated.

--Emil

em***@collectivestudios.com (Emil Dotchevski) wrote:

Yes, I am using CSS, and overflow: scroll. Here is what I tried:
So you pretty much tried what I suggested, except that you don't use
table-display: fixed, which really makes a difference.
What I want it to look like is this: a table with 100% width, with
one row, two cells: one 20%, the other 80% of the table width.
Why? It is debatable whether your example logically has tabular data,
but in any case "Computer Output" is logically a heading and now wastes
valuable horizontal space, so it would be natural to put it before the
<pre> - and use normal horizontal scrolling for the page as a whole if
the preformatted text doesn't fit.
I tried to put the <pre> out of the table and specify
style="width:100%" and it worked fine. Somehow the fact that it is
inside a table breaks it.

Browsers may use information about the cell contents when deciding on
column widths, overriding your width suggestions. Using the
table-layout property may prevent this.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html