user6628729 user6628729 - 3 months ago 12
HTML Question

fixed headers and scroll in HTML

I create table and in that table i also want scroll and want to fixed headers when scroll is display .i also used position:fixed but this does not work infact when i add this then all headers come in one position
This is what i try check this code please



.GridviewScrollHeader TH, .GridviewScrollHeader TD
{
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
text-align: left;
vertical-align: bottom;

}
.GridviewScrollItem TD
{
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;

}
.GridviewScrollPager
{
border-top: 1px solid #AAAAAA;
background-color: #FFFFFF;

}
.GridviewScrollPager TD
{
padding-top: 3px;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;

}

.GridviewScrollPager A
{
color: #666666;
}
.GridviewScrollPager SPAN

{

font-size: 16px;

font-weight: bold;

}

.inner_table {
width: 100%;
border-collapse: collapse;
overflow: auto;
height: 300px;


}


#pagination a {
display:inline-block;
margin-right:5px;

}

<table ID="tabledata" class="inner_table GridviewScrollPager">
<thead>
<tr class="GridviewScrollHeader GridviewScrollItem">
<th>
Name
</th>
<th>
Class
</th>
</tr>

</thead>
<tbody>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td >
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
Roh
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
ABC
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
DEF
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
EFG
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>

<td>
12
</td>
</tr>
</tbody>
</table>





So how i fixed headers and add scroll

Any solution for this question please

Answer

tr {
  width: 100%;
  display: inline-table;
  table-layout: fixed;
}

table {
  display: -moz-groupbox; // Firefox Bad Effect
}

tbody {
  overflow-y: scroll;
  height: 250px; //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

.GridviewScrollHeader TH,
.GridviewScrollHeader TD {
  padding: 5px;
  font-weight: bold;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #EFEFEF;
  text-align: left;
  vertical-align: bottom;
}

.GridviewScrollItem TD {
  padding: 5px;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #FFFFFF;
}

.GridviewScrollPager {
  border-top: 1px solid #AAAAAA;
  background-color: #FFFFFF;
}

.GridviewScrollPager TD {
  padding-top: 3px;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
}

.GridviewScrollPager A {
  color: #666666;
}

.GridviewScrollPager SPAN {
  font-size: 16px;
  font-weight: bold;
}

.inner_table {
  width: 98.4%;
  border-collapse: collapse;
  overflow: auto;
}

#pagination a {
  display: inline-block;
  margin-right: 45px;
}
<table ID="tabledata" class="inner_table GridviewScrollPager">
  <thead>
    <tr class="GridviewScrollHeader GridviewScrollItem">
      <th>
        Name
      </th>
      <th>
        Class
      </th>
    </tr>

  </thead>
  <tbody>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        Roh
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        ABC
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        DEF
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        EFG
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>
        John
      </td>

      <td>
        12
      </td>
    </tr>
  </tbody>
</table>

Comments