How to make a horizontally scrollable cell in a datatable

Question

This is with PrimeFaces, but I think the question applies equally to a standard JSF datatable.

I have a datatable column where the entry is being word wrapped because the content can be quite long. To make the display more readable, I would prefer the content to be not wrapped, but instead provide horizontal scrolling to view whatever content doesn't appear by default.

I am sure this a simple CSS modification but my proficiency is very low.

<p:dataTable ... >

    <p:column headerText="Book Title">
         <h:outputText value="#{book.title}" style="???" />

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

This is only possible when the text is enclosed in a block-level HTML element with a definied width and text-wrapping disabled and the element in question has the CSS property overflow:scroll or at least overflow-x:scroll definied.

So, in plain HTML terms, that would basically be the following approach:

<div style="width: 200px; white-space: nowrap; overflow-x: scroll;">
    Some really really lengthy book title about a really really lengthy book.
</div>

In PrimeFaces <p:column> terms, that would be:

<p:column styleClass="scrollableCell">
    #{book.title}
</p:column>

with

.ui-datatable td.scrollableCell div.ui-dt-c {
    width: 200px;
    white-space: nowrap;
    overflow-x: scroll;
}

Note that you don't need to bring in any div, the <p:column> already does that.

How to make a horizontally scrollable cell in a datatable

1 Answers1

See also:

Linked