JSF 2.0更改数据表行高

Question

我不知道是否有任何特定的样式JSF数据表，但我无法更改行高。

这是我的数据表：

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


</h:dataTable>

这是我的css dt_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>

Answer 1

HTML tr没有高度属性。可以为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>

更新：

我已经在Chrome 18和IE 9中对此进行了测试。我将包含仅更改td高度的表格图片：

身高：30px;

身高：50px;

身高：10px;

如您所见，行高会发生变化。也许您正在Internet Explorer中进行测试，并且您的样式更改未更新。要更改其行为，请转到工具 / 互联网选项，然后在浏览历史记录部分选择设置一个弹出窗口出现，在临时Internet文件部分检查第一个选项每次访问网页现在选择确定关闭弹出窗口然后再次确定关闭Internet选项，更新您的网站，你可以看到变化。

Answer 2

试试这个：

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