Question

我正在尝试在面板中使用extendedDataTable。我使用以下代码：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <f:view>
        <h:head></h:head>
        <h:body>
            <h:form id="form">
                <rich:panel style="width:400px">
                    <rich:extendedDataTable 
                          value="#{mitarbeiterBean.mitarbeiter}"
                          var="mitarbeiter"
                          style="width: 100%;">
                        <rich:column sortBy="#{mitarbeiter.vorname}">
                            <f:facet name="header">
                                <h:outputText value="Vorname" />
                            </f:facet>
                            <h:outputText value="#{mitarbeiter.vorname}" />
                        </rich:column>

                        <rich:column sortBy="#{mitarbeiter.nachname}">
                            <f:facet name="header">
                                <h:outputText value="Nachname" />
                            </f:facet>
                            <h:outputText value="#{mitarbeiter.nachname}" />
                        </rich:column>
                    </rich:extendedDataTable>
                </rich:panel>
            </h:form>
        </h:body>
    </f:view>
</ui:composition>

支持bean：

import javax.inject.Named;

@Named
public class MitarbeiterBean {
    public class Mitarbeiter {
        private String vorname;
        private String nachname;

        public Mitarbeiter (String vorname, String nachname) {
            this.vorname= vorname;
            this.nachname= nachname;
        }

        public String getVorname () {
            return vorname;
        }

        public void setVorname (String vorname) {
            this.vorname= vorname;
        }

        public String getNachname () {
            return nachname;
        }

        public void setNachname (String nachname) {
            this.nachname= nachname;
        }
    }

    public Mitarbeiter[] getMitarbeiter () {
        return new Mitarbeiter[] {
            new Mitarbeiter("Hans", "Müller"),
            new Mitarbeiter("Heiri", "Meier"),
            new Mitarbeiter("Max", "Mustermann"),
            new Mitarbeiter("Susi", "Sorgenlos")
        };
    }
}

该表不使用其空间并被压缩到左侧。我几乎得到了我想要的以下CSS：

.rf-edt-tbl {
    width: 100%;
}

.rf-edt-tbl tr td {
    width: 50%;
}

.rf-edt-tbl tr td div {
    width: auto;
}

但是当出现滚动条时，表格的标题和内容会不一致。

如何让我的桌子看起来正确？

Answer 1

在rich：extendedDataTable标记

中使用此样式

style="table-layout:fixed;"

Answer 2

我有同样的问题，我会提供额外的信息，以防它提供一些线索：

每个单元格都有这个附加类（可能与列大小调整有关）：

.rf-edt-c-j_idt162 {
  width: 100px;
}

每列的j_idt更改后的数字。该类正在修复列宽，压缩列。

它会覆盖.rf-edt-c和.rf-edt-hdr-c，所以我无法使用它们设置特定的宽度。

<div class="rf-edt-c rf-edt-c-j_idt162"...

如果我用这样的东西设置列宽：

.rf-edt TABLE {
   width:100;
}
.rf-edt DIV {
   width: 100%;
}

然后列扩展以填充区域，但标题和内容对齐错误，因为标题和内容位于不同的表中。

rich：extendedDataTable in rich：panel是压缩的

2 个答案: