rich：extendedDataTable in rich：パネルが圧縮されています

Question

パネル内でextendedDataTableを使用しようとしています。テーブルには、そのスペースを使用しないと左に圧縮され

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") 
     }; 
    } 
} 

：バッキングBean

<?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> 

：私は、次のコードを使用しています。

しかし、スクロールバーが表示されたときに、表のヘッダーとコンテンツの位置がずれてしまいます。

テーブルを正しく見えるようにするにはどうすればよいですか？

Answer 1

はあなたの豊かな中で、このスタイルを使用します。

各セルは、（この追加のクラスがあります。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%; 
} 

ヘッダとコンテンツが異なるテーブルにあるのでその後、列はエリアを埋めるために展開するが、ヘッダとコンテンツが間違って整列します。