table-content.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <title>perfect-scrollbar example</title>
  6. <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
  7. <script src="../dist/js/perfect-scrollbar.js"></script>
  8. <style>
  9. #table {
  10. font-size: 20px;
  11. }
  12. #table thead, #table tbody, #table tr {
  13. display: block;
  14. width: 600px;
  15. border-spacing: 0;
  16. border-collapse: collapse;
  17. }
  18. #table tbody {
  19. height: 100px;
  20. overflow-y: auto;
  21. overflow-x:hidden;
  22. position: relative;
  23. }
  24. #table tbody td, #table thead th {
  25. display: block;
  26. border: 1px solid black;
  27. width: 200px;
  28. float: left;
  29. box-sizing: border-box;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="table" class="wrapper">
  35. <table id='table'>
  36. <thead>
  37. <tr>
  38. <th>Name</th>
  39. <th>Age</th>
  40. <th>Occupation</th>
  41. </tr>
  42. </thead>
  43. <tbody>
  44. <tr>
  45. <td>Alex</td>
  46. <td>20</td>
  47. <td>Student</td>
  48. </tr>
  49. <tr>
  50. <td>Paul</td>
  51. <td>23</td>
  52. <td>Engineer</td>
  53. </tr>
  54. <tr>
  55. <td>Chris</td>
  56. <td>19</td>
  57. <td>Human being</td>
  58. </tr>
  59. <tr>
  60. <td>Alex</td>
  61. <td>20</td>
  62. <td>Student</td>
  63. </tr>
  64. <tr>
  65. <td>Paul</td>
  66. <td>23</td>
  67. <td>Engineer</td>
  68. </tr>
  69. <tr>
  70. <td>Chris</td>
  71. <td>19</td>
  72. <td>Human being</td>
  73. </tr>
  74. </tbody>
  75. </table>
  76. <script type="text/javascript">
  77. var $ = document.querySelector.bind(document);
  78. window.onload = function () {
  79. Ps.initialize($('#table tbody'));
  80. };
  81. </script>
  82. </body>
  83. </html>