rich:panel中的rich:extendedDataTable被压缩

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%;
}

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