0

I currently have a table that you can scroll both horizontally and vertically. However i wish to have the header visible at the top of the screen when scrolling up and down.

I have tried a few methods of trying to get the header to stay static but with no avail.

The problem i have had is with the table scrolling right and left also i cannot get the header to stay static as i need it to move when scrolling left and right still.

I have attached a jsfiddle as an example of the table.

html file

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="results">
<div class="results_table">
  <table>
    <thead>
    <tr>
        <th>COL1</th>
        <th>COL2</th>
        <th>COL3</th>
        <th>COL4</th>
        <th>COL5</th>
       <th>COL6</th>
        <th>COL7</th>
        <th>COL8</th>
       <th>COL9</th>
        <th>COL10</th>


    </tr>
   </thead>

   <tbody>
   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>

   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>

   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>

   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>
   </tbody>

   </table>
  </div>
  </div>
  </body>
</html>

css file

body{
    font-family:arial;
    margin:0;
    border-top:2px solid black;
    padding-bottom:30px;
    padding-left:10px;
    padding-right:10px;
    background-color:#F9F9F9;
}

/* Results table container */
.results{

    padding:20px;
    border-radius: 5px;
    -webkit-box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
    box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
    padding-left:50px;
    padding-right:50px;
    width:600px;
    height:200px;

}

.results_table{
    overflow:auto;
    border-radius:5px;
    height:200px;


}

 table {

    border-collapse: collapse;
    font-size:12px;
    text-align:center;
    width:100%;
    table-layout:fixed;

}

.results_table td {
    padding-top:30px;
    padding-bottom:30px;
    padding-right:10px;
    padding-left:10px;
    border-bottom:1px solid black;

}

.results_table th {
    background:#1267B2;
    color:#fff;
    height:70px;
    width:100px;
    border-bottom:2px solid rgba(215,215,215,1.00);
    text-shadow: 1px 1px 3px #666666;
    padding:10px;


}

.results_table tbody tr:nth-child(odd) {
   background-color: #E7E7E7;
}

https://jsfiddle.net/afmhppoj/1/

Many Thanks

Ashley Colton
  • 61
  • 1
  • 10
  • `table head{position:fixed}` possibly dublication of http://stackoverflow.com/questions/15307135/freezing-fixing-the-top-header-row-of-a-table – Suman KC Aug 06 '15 at 11:58

2 Answers2

-1

I've updated your JSFiddle JSfiddle

Please go thorough it.

For the effect you want, you can use flotThead

And customize it accordingly.

vivekkupadhyay
  • 2,851
  • 1
  • 22
  • 35
-1

I have solution, however we can not scroll in x-axis. The header will fix, it will not move either x-axis or in y-axis.

let me know if it works for you.

Arun Kumar M
  • 1,633
  • 1
  • 15
  • 26