2

JSFデータテーブルのスタイル設定に固有のものがあるかどうかはわかりませんが、行の高さを変更することはできません。

これが私のデータテーブルです：

<h:dataTable value="#{myBean.myValue}"
             rowClasses="dt_row"
             var="o">


</h:dataTable>

これが私のcssdt_rowクラスです：

.dt_row {
    height: 10px;
}

ただし、行が生成されるとき、cssクラスで指定した値に関係なく、高さは同じままです。生成されたページのソースは次のようになり、問題ないようです。

<tr class="dt_row">

何か案は？

これが私のテーブル全体です：

    <h:dataTable value="#{searchBean.searchResult.concordances}"
                 styleClass="table"
                 var="concordance">

        <h:column>
            <pre>#{concordance.left}</pre>
        </h:column>

        <h:column>
            <pre style="color: blue;">#{concordance.middle}</pre>
        </h:column>

        <h:column>
            <pre>#{concordance.right}</pre>
        </h:column>

    </h:dataTable>
4

2 に答える 2

5

HTMLtrにはheight属性がありません。高さはに定義できますtd。

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>DataTable Row Height Sample</title>
        <style type="text/css">
            table {
                width: 200px;
            }
            table tr {
                color: darkorange;
            }
            table tr td {
                height: 80px;
            }
        </style>
    </h:head>
    <h:body>
        <h:form id="myForm">
            <h1>Show data</h1>
            <!-- check that I'm using styleClass, not rowClass -->
            <h:dataTable id="dataTable" var="data" value="#{datatableBean.lstData}"
                border="1" styleClass="table">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="ID" />
                    </f:facet>
                    <h:outputText value="#{data.id}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Value" />
                    </f:facet>
                    <h:outputText value="#{data.value}" />
                </h:column>
            </h:dataTable>
        </h:form>
    </h:body>
</ui:composition>

アップデート：

これをChrome18とIE9でテストしました。tdの高さのみを変更するテーブルの画像を含めます。

高さ：30px;

ここに画像の説明を入力してください

高さ：50px;

ここに画像の説明を入力してください

高さ：10px;

ここに画像の説明を入力してください

ご覧のとおり、行の高さが変わります。Internet Explorerでテストしていて、スタイルの変更が更新されていない可能性があります。動作を変更するには、 [ツール] / [インターネットオプション]に移動し、[閲覧の履歴]セクションで[設定]を選択してポップアップを表示します。[インターネット一時ファイル]セクションで最初のオプションを確認します。Webページにアクセスするたびに[OK]を選択してポップアップを閉じ、もう一度[OK ]を選択します。インターネットオプションを閉じるには、Webサイトを更新すると、変更を確認できます。

于 2012-05-04T23:13:05.843 に答える
0

これを試して ：

<p:dataTable id="table" >
<p:column id="id" headerText="#{message.label_id}" style="height:10px">
</p:column>

于 2016-08-30T07:24:33.303 に答える