JSF h:dataTable fix Header und Scroll Body

Diskutiere h:dataTable fix Header und Scroll Body im Web Tier Forum; 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...

  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 dieser Kurs hier weiter --> (hier klicken)
Die Seite wird geladen...

h:dataTable fix Header und Scroll Body - Ähnliche Themen

PDF Header und Footer automatisch einfügen
PDF Header und Footer automatisch einfügen im Forum Mobile Geräte
Header läd seit dem Serverumzug sehr langsam
Header läd seit dem Serverumzug sehr langsam im Forum Verbesserungsvorschläge
JTable wird ohne Header aufgebaut
JTable wird ohne Header aufgebaut im Forum Java Basics - Anfänger-Themen
HTTP-Header-Inspektor-Servlet
HTTP-Header-Inspektor-Servlet im Forum Allgemeines EE
IPv4-Header in Dezimal und Binär
IPv4-Header in Dezimal und Binär im Forum Hausaufgaben
Thema: h:dataTable fix Header und Scroll Body