Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!DOCTYPE html>
<html>
  <head>
    <link href="../css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/perfect-scrollbar.js"></script>
    <style>

      #table {

        font-size: 20px;

      }

      #table thead, #table tbody, #table tr {

        display: block;

        width: 600px;

        border-spacing: 0;

        border-collapse: collapse;

      }

      #table tbody {

        height: 100px;

        overflow-y: auto;

        overflow-x:hidden;

        position: relative;

        border-bottom: 1px solid black;

      }

      #table tbody td, #table thead th {

        display: block;

        border: 1px solid black;

        width: 200px;

        float: left;

        box-sizing: border-box;

      }

    </style>
  </head>
  <body>
    <div id="table" class="wrapper">
      <table id='table'>
        <thead>
          <tr>
            <th>Name</th><th>Age</th><th>Occupation</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alex</td><td>20</td><td>Student</td>
          </tr>
          <tr>
            <td>Paul</td><td>23</td><td>Engineer</td>
          </tr>
          <tr>
            <td>Chris</td><td>19</td><td>Human being</td>
          </tr>
          <tr>
            <td>Satoshi</td><td>30</td><td>Pokemon trainer</td>
          </tr>
          <tr>
            <td>Jun</td><td>27</td><td>Hero</td>
          </tr>
          <tr>
            <td>Yong</td><td>27</td><td>Money maker</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script>

    new PerfectScrollbar('#table tbody');

    </script>
  </body>
</html>