css - データテーブルで水平方向にスクロール可能なセルを作成する方法

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 をカスタム スタイルでオーバーライドするにはどうすればよいですか?