JSF 使 DataTable 可滚动答案

【问题标题】：JSF make DataTable scrollableJSF 使 DataTable 可滚动
【发布时间】：2012-07-02 15:09:00
【问题描述】：

我对使用 PrimeFaces 3.2 的数据表有疑问。

对于给定的 div，DataTable 内容太宽。所以我需要让 div / form 的内容可以滚动。当我使用 style="x-overflow: auto / scroll" 时没有任何改变。

生成的 html 如下所示：

<div id="content" style="width: 500px;">
  <form id="j_id1241625851_2_2315c4de" class="ui-widget ui-widget-content ui-shadow ui-corner-all" style="x-overflow: scroll;" enctype="application/x-www-form-urlencoded" action="/data.xhtml" method="post" name="j_id1241625851_2_2315c4de">
   <div id="j_id1241625851_2_2315c4de:serverdata" class="ui-datatable ui-widget">
    <table role="grid">
     <thead> ...
     </thead>
     <tfoot>
     <tbody id="j_id1241625851_2_2315c4de:serverdata_data" class="ui-datatable-data ui-widget-content">
      <tbody id="j_id1241625851_2_2315c4de:serverdata_data" class="ui-datatable-data ui-widget-content">
       <tr class="ui-widget-content ui-datatable-even" role="row" data-ri="0">
        <td style="width: 200px;" role="gridcell">
        <td role="gridcell">
        <td role="gridcell">
        <td role="gridcell">
        <td role="gridcell">
        ...
       </tr>
       ...
     </tbody>
    </table>
   </div>
 </form>
</div>

那么如何使表单的内容（例如数据表）可滚动？

【问题讨论】：

标签： html css jsf datatable primefaces

【解决方案1】：

因为你使用的是primefaces

您可以使用scrollable 和scrollWidth 属性

例如scrollable="true" scrollWidth="400"

看看陈列柜DataTable - Scrolling

【讨论】：