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.

Answer 1

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.