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. firestone
    firestone Mitglied
    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 hilft dir das kostenlose Training weiter --> (hier klicken)