JSF h:dataTable fix Header und Scroll Body

firestone

Bekanntes 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:
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:
	<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
 

Zurück
Oben