JSF h:dataTable fix Header und Scroll Body

Dieses Thema JSF - h:dataTable fix Header und Scroll Body im Forum "Web Tier" wurde erstellt von firestone, 5. Feb. 2015.

Thema: h:dataTable fix Header und Scroll Body Guten Morgen Zusammen, ich möchte gerne eine h:dataTable den body scrollbar machen und den Header fix. Soweit so...

  1. Guten Morgen Zusammen,
    ich möchte gerne eine h:dataTable den body scrollbar machen und den Header fix. Soweit so gut klappt auch nun habe ich aber leider einen Versatz die Spalten der Header sind nicht bündig mit denen des Bodys

    header.jpg

    Mein Css sieht wie folgt aus

    Code (Text):

    table.scrolltest {
                                width: 100%;
                           
                       
                        thead, tbody, tr, td, th { display: block; }
                       
                        tr:after {
                            content: ' ';
                            display: block;
                            visibility: hidden;
                            clear: both;
                        }
                       
                        thead th {
                            background-color:black;
                            height: 30px;
                                tr{
                                }
                            /*text-align: left;*/
                        }
                       
                        tbody {
                            height: 120px;
                            overflow-y: auto;
                        }
                       
                        thead {
                            /* fallback */
                        }
                       
                       
                        tbody td, thead th {
                            width: 19.2%;
                            float: left;
                        }
                       
                    }

     

    und die xhtml Seite

    Code (Text):

        <h:dataTable styleClass="scrolltest" id="table1" value="#{table1.test}" var="tab1"  border="1">
                                <h:column>
                                <!-- column header -->
                                    <f:facet name="header">Aus</f:facet>
                                <h:selectBooleanCheckbox  valueChangeListener="#{usersession.ausgelagert}" value="#{tab1.aus}" onclick="this.form.submit();" >                     
                                <f:attribute name="row" value="#{tab1.nr}" />
                                </h:selectBooleanCheckbox>
                                </h:column>
                                <h:column>
                                    <!-- column header -->
                                    <f:facet name="header">Spalte 2</f:facet>
                                    <!-- row record -->
                                    <h:outputText value="#{tab1.spalte2}"/>
                                </h:column>
                 
                                <h:column>
                                    <f:facet name="header">Spalte 3</f:facet>
                                    <h:outputText value="#{tab1.spalte3}"/>
                                </h:column>
                 
                                <h:column>
                                    <f:facet name="header">Spalte 4</f:facet>
                                    <h:outputText value="#{tab1.spalte4}"/>
                                </h:column>
                 
                                <h:column>
                                    <f:facet name="header">Spalte 5</f:facet>
                                    <h:outputText value="#{tab1.spalte5}"/>
                                </h:column>
                                </h:dataTable>


     

    Wer kann helfen :)

    Viele Grüße
    Fireli
     
  2. Vielleicht helfen dir diese Java-Grundlagen weiter --> *Klick*