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

本文介绍了如何在数据表中创建可水平滚动的单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我有一个datatable列，其中条目是字包装，因为内容可以相当长。为了使显示更易读，我希望内容不被包装，而是提供水平滚动来查看默认情况下不显示的任何内容。

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

 < p：dataTable ...& 
 
< p：column headerText =Book Title> 
< h：outputText value =＃{book.title}style =??? />

解决方案

只有当文本，定义的宽度和文本包装已停用，元素有问题的CSS属性 overflow：scroll 或至少 overflow-x：scroll 定义。 b
$ b

因此，在纯HTML术语中，基本上是以下方法：

  ; div style =width：200px; white-space：nowrap; overflow-x：scroll;> 
一本真的很漫长的书名，关于一本真的很长的书。 
< / 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，<$

另请参阅：

This is with PrimeFaces, but I think the question applies equally to a standard JSF datatable.

I have a datatable column where the entry is being word wrapped because the content can be quite long. To make the display more readable, I would prefer the content to be not wrapped, but instead provide horizontal scrolling to view whatever content doesn't appear by default.

I am sure this a simple CSS modification but my proficiency is very low.

<p:dataTable ... >

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

解决方案

This is only possible when the text is enclosed in a block-level HTML element with a definied width and text-wrapping disabled and the element in question has the CSS property overflow:scroll or at least overflow-x:scroll definied.

So, in plain HTML terms, that would basically be the following approach:

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

In PrimeFaces <p:column> terms, that would be:

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

Note that you don't need to bring in any div, the <p:column> already does that.

水平滚动