Using pre tag inside td

Question

I have a problem with the <pre> inside the <td> . I have a JSF datatable and three columns. I need all three columns to contain preformatted text.

If I use the <pre> , the text appears as pre-formatted, but the width of the columns becomes much larger than the text.

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

So my question is: is there a possible way to solve the width of the <td> that contains the <pre> inside?

Edition:

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> 

Edition:

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

Answer 1

The pre element defaults to 100% width, i.e. all available width. However, in table cells, this is relative to the width of the cell, and by default, the cell with pre is as wide as necessary for the longest line. If this is not the case, you need to identify the code that causes the deviation from the default value and modify it.

For example, if you set the attribute or property width in the table element, simply remove this parameter.

Answer 2

What about the div element containing the pre tag and using the overflow attribute on the div ?

A scroll bar will appear in the browser, but I believe that everything is fine with you :-)

Answer 3

shows a truncated version of the text in the table, and then when you hover over the cell, show the entire bit bit as a hint. Obviously, this may not work with your context.