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

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？