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时，才能执行此操作definied。

因此，用简单的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?

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

1 个答案:

另见：