La ligne et l'en-tête du tableau ne sont pas alignés correctement?

Question

J'ajoute dynamiquement l'en-tête et le corps de la table avec la barre de défilement verticale pour afficher les résultats, le problème auquel je suis confronté est le suivant:

Code GSP :

$ {} colonne

$ {row [colonne]}

Et mon code css:

table.scroll { 
    /* width: 100%; */ /* Optional */ 
    /* border-collapse: collapse; */ 
    border-spacing: 0; 
    border: 2px solid black; 
} 

table.scroll tbody, 
table.scroll thead { display: block; } 

thead tr th { 
    height: 30px; 
    width:15px; 
    line-height: 30px; 
    /* text-align: left; */ 
} 

table.scroll tbody { 
    height: 400px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

tbody { border-top: 2px solid black; } 

tbody td, thead th { 
    width:15px; 
    /* Optional */ 
    border-right: 1px solid black; 
    /* white-space: nowrap; */ 
} 

tbody td:last-child, thead th:last-child { 
    border-right: none; 
} 

Toute suggestion serait appréciée autour ..

Merci

Answer 1

Si vous allez ajouter une thead élément, vous devez ajouter un élément tbody pour les lignes situées en dessous. Voir w3schools: http://www.w3schools.com/tags/tag_thead.asp