API tools faq
paste
Advertisement
gsmashik

table with scrollbar vertical horizontal

gsmashik
Jul 2nd, 2018
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  9.     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  10.  
  11.     <!-- font Awesome 4.5.0 -->
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  13. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  14.  
  15. <style>
  16. .scroll-table-container {
  17. border:2px solid green;
  18. height: 300px;
  19. overflow: scroll;
  20. }
  21. .scroll-table, td, th {
  22. border-collapse:collapse;
  23. border:1px solid #777;
  24. min-width: 300px;}
  25. </style>
  26. </head>
  27. <body>
  28.     <div class="scroll-table-container">
  29.             <table class="scroll-table  table">
  30.                 <thead>
  31.                     <tr>
  32.                         <th>head1</th><th>head2</th><th>head3</th><th>head4</th><th>head5</th>
  33.                     </tr>
  34.                 </thead>
  35.                 <tbody>
  36.                     <tr><td>row 1 data 1</td><td>row 1 data 2</td><td>row 1 data 3</td><td>row 1 data 4</td><td>row 1 data 5</td></tr>
  37.                     <tr><td>row 2 data 1</td><td>row 2 data 2</td><td>row 2 data 3</td><td>row 2 data 4</td><td>row 2 data 5</td></tr>
  38.                     <tr><td>row 3 data 1</td><td>row 3 data 2</td><td>row 3 data 3</td><td>row 3 data 4</td><td>row 3 data 5</td></tr>
  39.                     <tr><td>row 4 data 1</td><td>row 4 data 2</td><td>row 4 data 3</td><td>row 4 data 4</td><td>row 4 data 5</td></tr>
  40.                     <tr><td>row 5 data 1</td><td>row 5 data 2</td><td>row 5 data 3</td><td>row 5 data 4</td><td>row 5 data 5</td></tr>
  41.                     <tr><td>row 6 data 1</td><td>row 6 data 2</td><td>row 6 data 3</td><td>row 6 data 4</td><td>row 6 data 5</td></tr>
  42.                     <tr><td>row 7 data 1</td><td>row 7 data 2</td><td>row 7 data 3</td><td>row 7 data 4</td><td>row 7 data 5</td></tr>
  43.                     <tr><td>row 8 data 1</td><td>row 8 data 2</td><td>row 8 data 3</td><td>row 8 data 4</td><td>row 8 data 5</td></tr>
  44.                     <tr><td>row 9 data 1</td><td>row 9 data 2</td><td>row 9 data 3</td><td>row 9 data 4</td><td>row 9 data 5</td></tr>
  45.                     <tr><td>row 10 data 1</td><td>row 10 data 2</td><td>row 10 data 3</td><td>row 10 data 4</td><td>row 10 data 5</td></tr>
  46.                     <tr><td>row 11 data 1</td><td>row 11 data 2</td><td>row 11 data 3</td><td>row 11 data 4</td><td>row 11 data 5</td></tr>
  47.                     <tr><td>row 12 data 1</td><td>row 12 data 2</td><td>row 12 data 3</td><td>row 12 data 4</td><td>row 12 data 5</td></tr>
  48.                     <tr><td>row 13 data 1</td><td>row 13 data 2</td><td>row 13 data 3</td><td>row 13 data 4</td><td>row 13 data 5</td></tr>
  49.                     <tr><td>row 14 data 1</td><td>row 14 data 2</td><td>row 14 data 3</td><td>row 14 data 4</td><td>row 14 data 5</td></tr>
  50.                     <tr><td>row 15 data 1</td><td>row 15 data 2</td><td>row 15 data 3</td><td>row 15 data 4</td><td>row 15 data 5</td></tr>
  51.                     <tr><td>row 16 data 1</td><td>row 16 data 2</td><td>row 16 data 3</td><td>row 16 data 4</td><td>row 16 data 5</td></tr>
  52.                     <tr><td>row 17 data 1</td><td>row 17 data 2</td><td>row 17 data 3</td><td>row 17 data 4</td><td>row 17 data 5</td></tr>
  53.                     <tr><td>row 18 data 1</td><td>row 18 data 2</td><td>row 18 data 3</td><td>row 18 data 4</td><td>row 18 data 5</td></tr>
  54.                     <tr><td>row 19 data 1</td><td>row 19 data 2</td><td>row 19 data 3</td><td>row 19 data 4</td><td>row 19 data 5</td></tr>
  55.                     <tr><td>row 20 data 1</td><td>row 20 data 2</td><td>row 20 data 3</td><td>row 20 data 4</td><td>row 20 data 5</td></tr>
  56.                     <tr><td>row 21 data 1</td><td>row 21 data 2</td><td>row 21 data 3</td><td>row 21 data 4</td><td>row 21 data 5</td></tr>
  57.                     <tr><td>row 22 data 1</td><td>row 22 data 2</td><td>row 22 data 3</td><td>row 22 data 4</td><td>row 22 data 5</td></tr>
  58.                     <tr><td>row 23 data 1</td><td>row 23 data 2</td><td>row 23 data 3</td><td>row 23 data 4</td><td>row 23 data 5</td></tr>
  59.                     <tr><td>row 24 data 1</td><td>row 24 data 2</td><td>row 24 data 3</td><td>row 24 data 4</td><td>row 24 data 5</td></tr>
  60.                     <tr><td>row 25 data 1</td><td>row 25 data 2</td><td>row 25 data 3</td><td>row 25 data 4</td><td>row 25 data 5</td></tr>
  61.                     <tr><td>row 26 data 1</td><td>row 26 data 2</td><td>row 26 data 3</td><td>row 26 data 4</td><td>row 26 data 5</td></tr>
  62.                     <tr><td>row 27 data 1</td><td>row 27 data 2</td><td>row 27 data 3</td><td>row 27 data 4</td><td>row 27 data 5</td></tr>
  63.                     <tr><td>row 28 data 1</td><td>row 28 data 2</td><td>row 28 data 3</td><td>row 28 data 4</td><td>row 28 data 5</td></tr>
  64.                     <tr><td>row 29 data 1</td><td>row 29 data 2</td><td>row 29 data 3</td><td>row 29 data 4</td><td>row 29 data 5</td></tr>
  65.                     <tr><td>row 30 data 1</td><td>row 30 data 2</td><td>row 30 data 3</td><td>row 30 data 4</td><td>row 30 data 5</td></tr>
  66.                     <tr><td>row 31 data 1</td><td>row 31 data 2</td><td>row 31 data 3</td><td>row 31 data 4</td><td>row 31 data 5</td></tr>
  67.                     <tr><td>row 32 data 1</td><td>row 32 data 2</td><td>row 32 data 3</td><td>row 32 data 4</td><td>row 32 data 5</td></tr>
  68.                     <tr><td>row 33 data 1</td><td>row 33 data 2</td><td>row 33 data 3</td><td>row 33 data 4</td><td>row 33 data 5</td></tr>
  69.                     <tr><td>row 34 data 1</td><td>row 34 data 2</td><td>row 34 data 3</td><td>row 34 data 4</td><td>row 34 data 5</td></tr>
  70.                     <tr><td>row 35 data 1</td><td>row 35 data 2</td><td>row 35 data 3</td><td>row 35 data 4</td><td>row 35 data 5</td></tr>
  71.                     <tr><td>row 36 data 1</td><td>row 36 data 2</td><td>row 36 data 3</td><td>row 36 data 4</td><td>row 36 data 5</td></tr>
  72.                     <tr><td>row 37 data 1</td><td>row 37 data 2</td><td>row 37 data 3</td><td>row 37 data 4</td><td>row 37 data 5</td></tr>
  73.                     <tr><td>row 38 data 1</td><td>row 38 data 2</td><td>row 38 data 3</td><td>row 38 data 4</td><td>row 38 data 5</td></tr>
  74.                     <tr><td>row 39 data 1</td><td>row 39 data 2</td><td>row 39 data 3</td><td>row 39 data 4</td><td>row 39 data 5</td></tr>
  75.                     <tr><td>row 40 data 1</td><td>row 40 data 2</td><td>row 40 data 3</td><td>row 40 data 4</td><td>row 40 data 5</td></tr>
  76.                     <tr><td>row 41 data 1</td><td>row 41 data 2</td><td>row 41 data 3</td><td>row 41 data 4</td><td>row 41 data 5</td></tr>
  77.                     <tr><td>row 42 data 1</td><td>row 42 data 2</td><td>row 42 data 3</td><td>row 42 data 4</td><td>row 42 data 5</td></tr>
  78.                     <tr><td>row 43 data 1</td><td>row 43 data 2</td><td>row 43 data 3</td><td>row 43 data 4</td><td>row 43 data 5</td></tr>
  79.                     <tr><td>row 44 data 1</td><td>row 44 data 2</td><td>row 44 data 3</td><td>row 44 data 4</td><td>row 44 data 5</td></tr>
  80.                     <tr><td>row 45 data 1</td><td>row 45 data 2</td><td>row 45 data 3</td><td>row 45 data 4</td><td>row 45 data 5</td></tr>
  81.                     <tr><td>row 46 data 1</td><td>row 46 data 2</td><td>row 46 data 3</td><td>row 46 data 4</td><td>row 46 data 5</td></tr>
  82.                     <tr><td>row 47 data 1</td><td>row 47 data 2</td><td>row 47 data 3</td><td>row 47 data 4</td><td>row 47 data 5</td></tr>
  83.                     <tr><td>row 48 data 1</td><td>row 48 data 2</td><td>row 48 data 3</td><td>row 48 data 4</td><td>row 48 data 5</td></tr>
  84.                     <tr><td>row 49 data 1</td><td>row 49 data 2</td><td>row 49 data 3</td><td>row 49 data 4</td><td>row 49 data 5</td></tr>
  85.                     <tr><td>row 50 data 1</td><td>row 50 data 2</td><td>row 50 data 3</td><td>row 50 data 4</td><td>row 50 data 5</td></tr>
  86.                 </tbody>
  87.             </table>
  88.         </div>
  89. </body>
  90. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!