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

Question

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

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

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

<p:dataTable ... >

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

Answer 1

只有当文本包含在 block-level HTML element 中时才有可能具有已定义的宽度和禁用的文本换行，并且相关元素具有 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>已经这样做了。

另见:

• How do I override default PrimeFaces CSS with custom styles?