修复标题并滚动HTML

时间：2016-08-25 05:28:04

标签： html css header html-table

我创建了一个表，在该表中我还想要滚动并希望在显示滚动时修复标题。

我还使用了position:fixed，但这不起作用。事实上，当我添加它时，所有标题都在一个位置。

这是我尝试过的。请检查此代码：

.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>

那么我该如何修复标题并添加滚动？

请问这个问题的任何解决方案。

1 个答案:

答案 0 :(得分：0)

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>

相关问题
最新问题