css - 如何在数据表中制作水平滚动单元格

Question

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

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

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

<p:dataTable ... >

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

Answer 1

仅当文本包含在具有定义宽度和禁用文本换行的块级 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>

和

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

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

也可以看看：

• 如何使用自定义样式覆盖默认的 PrimeFaces CSS？