2

I am facing an issue in alignment of table.I want fixed header and scrollable body of table .I have align table header and body using 

display:table-header-group

I have used following css property on table body

<tbody class="scrollablebody">

.scrollablebody
 {
  display: block;  //if  i  remove then  scroll bar is not  coming..i  need  scroll bar 
  overflow-y: auto;  
  max-height: 200px;
}

but when i use above css on table body all alignment get disturbed. Please let me know is there way to achieve this ? thanks in advance..

[jsfiddle] (http://jsfiddle.net/saurabh07/7aj5fxmb/)

sar
  • 1,277
  • 3
  • 21
  • 48
  • @user3168736 have you checked jsfiddle? field of first name get extended similarly others..it is visible in jsfiddle.. – sar Aug 07 '14 at 14:52
  • See my answer to [this post](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers/25818428#25818428) for the best solution I know of. There are also tons of other answers there that might be helpful. – DoctorDestructo Sep 16 '14 at 00:30

1 Answers1

1

Just added different id's to each table row.

HTML

<tr>
                <td id="name">Adam</td>
                <td id="lastname">Gil</td>
                <td id="id">0067</td>
                <td id="country">Australia</td>
                <td id="branch">Sydney</td>
                <td id="location">Sydney AU</td>
                <td id="cardno">67543</td>
                <td id="percent">50%</td>
            </tr>

CSS

#name {
    width: 13.2%;
}
#lastname {
    width: 12.9%;
}
#id {
    width: 22.8%;
}
#country {
    width: 10.5%;
}
#branch {
    width: 9.3%;
}
#location {
    width: 10.9%;
}
#cardno {
    width: 10.5%;
}
#percent {
}
Anonymous
  • 1,303
  • 4
  • 19
  • 31
  • not working. If I add one more column then I have to again sets width.I am looking for some generic solution. – sar Aug 08 '14 at 06:38