Using pre tag inside td

Question

I have a problem using <pre> tag inside <td>. I have JSF datatable and three columns of it. I need all three columns to contain preformatted text.

If I use <pre> tag the text is shown preformatted as I need but the width of the columns gets much bigger than then the text.

I can solve this in css by specifying the white-space: pre-line; in <pre> tag's style. But it only works with firefox and IE, the chrome ignores this kind of style.

So my question: is there a possible way of solving the width of <td> which contains <pre> tag inside?

EDITED:

My css class:

.dt_row {
    height: 8px;
    margin: 3px 3px 3px 3px;
    color: #000000;
    white-space: pre-line;
}

And my datatable:

    <h:dataTable value="#{searchBean.searchResult.concordances}"
                 var="concordance">

        <h:column>
            <pre class="dt_row">
                #{concordance.left}
            </pre>
        </h:column>

        <h:column>
            <pre class="dt_row" style="color: blue;">
                #{concordance.middle}
            </pre>
        </h:column>

        <h:column>
            <pre class="dt_row">
                #{concordance.right}
            </pre>
        </h:column>

    </h:dataTable>

EDITED:

I found the solution. Instead of <pre> tag, I have used <code> and now all data is displayed perfectly.

Stop, stop. You say `white-space:pre-line` doesn't work with Chrome. But it does! http://jsfiddle.net/53eUR/1/ So something else must be going wrong. — Mr Lister, May 05 '12 at 21:03
@Mr Lister but if I remove white-space:pre-line form css the IE and firefox shows the same result as chrome. With a huge width columns in a table. — Paulius Matulionis, May 05 '12 at 21:09
I have edited my question by adding css class and datatable. — Paulius Matulionis, May 05 '12 at 21:16
@Sarfraz I can not apply width to a td becouse the length of the text being generated in td can be change by user specifying the corresponding property. — Paulius Matulionis, May 05 '12 at 21:18
@Paulius Matulionis, you need to post the actual HTML document or its URL. The CSS code you posted does not create the problem you describe, for simple HTML markup (a table with `pre` element inside a cell). — Jukka K. Korpela, May 06 '12 at 11:05

score 9 · Accepted Answer · answered May 05 '12 at 20:54

The pre element occupies by default 100% width, i.e. the entire available width. In table cells, however, this is relative to the cell width, and by default a cell with pre is just as wide as needed for the longest line. If this is not the case, you need to identify the code that causes a deviation from the default, and modify it.

For example, if you have set a width attribute or property on the table element, just remove that setting.

score 3 · Answer 2 · answered May 05 '12 at 20:30

3

How about having a div element that houses the pre tag and using a overflow attribute in the div?

The browser would put a scrollbar, but I believe that's okay with you ;-)

answered May 05 '12 at 20:30

g13n

3,218
2
24
19

No, this does not work. I have wrapped

 with div, added overflow attribute with css. Firefox shows nothing at all and chrome generates scroll bars within each table row.

– Paulius Matulionis May 05 '12 at 20:36

@PauliusMatulionis Do you have the URL where I can see this? – g13n May 05 '12 at 20:38
@PauliusMatulionis OTOH if you are fine with wrapping text take a look at this . – g13n May 05 '12 at 20:45
Yes I have just deployed it for you in the remote server: http://tekstynas.vdu.lt/dev. Open this link and in the top right corner it will be link FOR INTERNATIONAL VISITORS click on it and choose english. Then in search term specify for e.g. "home" press search. Next you will see a table. Click on link "home" and you will get a table wich is my problem. Use chrome for this, because firefox and IE is ok. – Paulius Matulionis May 05 '12 at 21:05

Restricting the `` that houses the `

` with a width sort of works.  But then since you have tables within tables, they all don't align to each other.  If you need to, you need to be adding more rows to the same table dynamically.

– g13n May 05 '12 at 22:21

score -3 · Answer 3 · answered May 05 '12 at 20:28

-3

show a truncated version of the text in the table then when you hover over the cell show show the whole lot bit like tooltip. Obviously this may not work with the your context.

answered May 05 '12 at 20:28

matpol

3,042
1
15
18

Using pre tag inside td

3 Answers3