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

Mein Css sieht wie folgt aus
und die xhtml Seite
Wer kann helfen
Viele Grüße
Fireli
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

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