如何在数据表中创建可水平滚动的单元格

这是 PrimeFaces 的情况，但我认为这个问题同样适用于标准 JSF 数据表。

我有一个数据表列，其中的条目被自动换行，因为内容可能很长。为了使显示更具可读性，我希望内容不被换行，而是提供水平滚动来查看默认情况下不显示的任何内容。

我确信这是一个简单的 CSS 修改，但我的熟练程度很低。

<p:dataTable ... >

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

仅当文本包含在块级 HTML 元素 http://www.htmlhelp.com/reference/html40/block.html具有定义的宽度和禁用文本换行，并且相关元素具有 CSS 属性overflow:scroll或者至少overflow-x:scroll定义的。

因此，用简单的 HTML 术语来说，基本上是以下方法：

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

在 PrimeFaces 中<p:column>条款，那就是：

<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;
}

请注意，您不需要引入任何 div，<p:column>已经这样做了。

也可以看看：

• 如何使用自定义样式覆盖默认的 PrimeFaces CSS？ https://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997