How to make a horizontally scrollable cell in a datatable
css, jsf-2, primefaces
Solution
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.
See also:
- How do I override default PrimeFaces CSS with custom styles?
Problem
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="???" /> ```