By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,965 Members | 1,479 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,965 IT Pros & Developers. It's quick & easy.

pre-formated text with scroll bars at 100% width

P: n/a
I have a table that is at 100% width, which contains a <TD> that is
80% of that. 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.

I can't get this to work, no matter what combination of <PRE>, width,
and style I try. Any help greatly appreciated.

Thanks,
Emil
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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

Jul 20 '05 #2

P: n/a
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
Jul 20 '05 #3

P: n/a
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

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.