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.
With HTML, you can easily add HTML tag inside a table. The tag should open and close inside the <td> tag. For example, adding a paragraph <p>… </> tag or even a list tag i.e. <ul>…
The <td> tag defines a standard data cell in an HTML table. An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With