API tools faq
paste
Advertisement
trentjs

Scrolling Table CSS Only

trentjs
Dec 24th, 2020
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>
  6.         Scrolling Table Example
  7.     </title>
  8.  
  9.     <style>
  10.    
  11.         body{
  12.             font-family: Arial, Helvetica, sans-serif;
  13.         }
  14.  
  15.         .yTable {
  16.             width: 100%;
  17.             border-spacing: 0;
  18.         }
  19.  
  20.         .yTableBody, .yTableHead {
  21.             display: block;
  22.         }
  23.  
  24.         .yTableBody {
  25.             overflow-y: auto;
  26.             overflow-x: hidden;
  27.         }
  28.        
  29.         .yTableBody {
  30.             min-width: 100%;
  31.         }
  32.  
  33.         .yTableHead{
  34.             background-color: #dedede;
  35.         }
  36.        
  37.         .yTableHead tr{
  38.             margin-right: 1em;
  39.         }
  40.  
  41.         .yTableBody tr, .yTableHead tr {
  42.             display: flex;
  43.             flex-direction: row;
  44.             flex-wrap: nowrap;
  45.         }
  46.        
  47.         .yTableBody td, .yTableHead th {
  48.             width:100%;
  49.         }
  50.  
  51.         .yTable td, .yTableHead th {
  52.             text-align:left;
  53.             padding:0.5em;
  54.         }
  55.        
  56.         /* ::::::::::: [ SECONDARY STYLES ... ] ::::::::::: */
  57.  
  58.  
  59.         .yTableBody tr{
  60.             border-bottom: 1px solid #dddddd;
  61.         }
  62.  
  63.         .yBody09{
  64.             height: 9em;
  65.         }
  66.  
  67.     </style>
  68. </head>
  69.  
  70. <body>
  71.     <table class="yTable">
  72.         <thead class="yTableHead">
  73.             <tr>
  74.                 <th>Name</th>
  75.                 <th>Role</th>
  76.                 <th>CC</th>
  77.             </tr>
  78.         </thead>
  79.         <tbody class="yTableBody yBody09">
  80.             <tr>
  81.                 <td>Mark Hamill</td>
  82.                 <td>Luke Skywalker</td>
  83.                 <td>Cast</td>
  84.             </tr>
  85.             <tr>
  86.                 <td>Harrison Ford</td>
  87.                 <td>Han Solo</td>
  88.                 <td>Cast</td>
  89.             </tr>
  90.             <tr>
  91.                 <td>Carrie Fisher</td>
  92.                 <td>Princess Leia Organa</td>
  93.                 <td>Cast</td>
  94.             </tr>
  95.             <tr>
  96.                 <td>Peter Cushing</td>
  97.                 <td>Grand Moff Tarkin</td>
  98.                 <td>Cast</td>
  99.             </tr>
  100.             <tr>
  101.                 <td>Alec Guinness</td>
  102.                 <td>Ben Obi-Wan Kenobi</td>
  103.                 <td>Cast</td>
  104.             </tr>
  105.             <tr>
  106.                 <td>Anthony Daniels</td>
  107.                 <td>C-3PO</td>
  108.                 <td>Cast</td>
  109.             </tr>
  110.             <tr>
  111.                 <td>Kenny Baker</td>
  112.                 <td>R2-D2</td>
  113.                 <td>Cast</td>
  114.             </tr>
  115.             <tr>
  116.                 <td>Peter Mayhew</td>
  117.                 <td>Chewbacca</td>
  118.                 <td>Cast</td>
  119.             </tr>
  120.             <tr>
  121.                 <td>David Prowse</td>
  122.                 <td>Darth Vader</td>
  123.                 <td>Cast</td>
  124.             </tr>
  125.             <tr>
  126.                 <td>Phil Brown</td>
  127.                 <td>Uncle Owen</td>
  128.                 <td>Cast</td>
  129.             </tr>
  130.             <tr>
  131.                 <td>Shelagh Fraser</td>
  132.                 <td>Aunt Beru</td>
  133.                 <td>Cast</td>
  134.             </tr>
  135.             <tr>
  136.                 <td>Jack Purvis</td>
  137.                 <td>Chief Jawa</td>
  138.                 <td>Cast</td>
  139.             </tr>
  140.             <tr>
  141.                 <td>Alex McCrindle</td>
  142.                 <td>General Dodonna</td>
  143.                 <td>Cast</td>
  144.             </tr>
  145.             <tr>
  146.                 <td>Eddie Byrne</td>
  147.                 <td>General Willard</td>
  148.                 <td>Cast</td>
  149.             </tr>
  150.             <tr>
  151.                 <td>Drewe Henley</td>
  152.                 <td>Red Leader</td>
  153.                 <td>Cast</td>
  154.             </tr>
  155.             <tr>
  156.                 <td>Denis Lawson</td>
  157.                 <td>Red Two (Wedge)</td>
  158.                 <td>Cast</td>
  159.             </tr>
  160.             <tr>
  161.                 <td>Garrick Hagon</td>
  162.                 <td>Red Three (Biggs)</td>
  163.                 <td>Cast</td>
  164.             </tr>
  165.             <tr>
  166.                 <td>Jack Klaff</td>
  167.                 <td>Red Four (John D.)</td>
  168.                 <td>Cast</td>
  169.             </tr>
  170.             <tr>
  171.                 <td>William Hootkins</td>
  172.                 <td>Red Six (Porkins)</td>
  173.                 <td>Cast</td>
  174.             </tr>
  175.             <tr>
  176.                 <td>Angus MacInnes</td>
  177.                 <td>Gold Leader</td>
  178.                 <td>Cast</td>
  179.             </tr>
  180.             <tr>
  181.                 <td>Jeremy Sinden</td>
  182.                 <td>Gold Two</td>
  183.                 <td>Cast</td>
  184.             </tr>
  185.             <tr>
  186.                 <td>Graham Ashley</td>
  187.                 <td>Gold Five</td>
  188.                 <td>Cast</td>
  189.             </tr>
  190.             <tr>
  191.                 <td>Don Henderson</td>
  192.                 <td>General Taggi</td>
  193.                 <td>Cast</td>
  194.             </tr>
  195.             <tr>
  196.                 <td>Richard LeParmentier</td>
  197.                 <td>General Motti</td>
  198.                 <td>Cast</td>
  199.             </tr>
  200.             <tr>
  201.                 <td>Leslie Schofield</td>
  202.                 <td>Commander #1</td>
  203.                 <td>Cast</td>
  204.             </tr>
  205.             <tr>
  206.                 <td>David Ankrum</td>
  207.                 <td>Red Two</td>
  208.                 <td>Cast</td>
  209.             </tr>
  210.             <tr>
  211.                 <td>Mark Anthony Austin</td>
  212.                 <td>Boba Fett</td>
  213.                 <td>Cast</td>
  214.             </tr>
  215.             <tr>
  216.                 <td>Scott Beach</td>
  217.                 <td>Stormtrooper</td>
  218.                 <td>Cast</td>
  219.             </tr>
  220.             <tr>
  221.                 <td>Lightning Bear</td>
  222.                 <td>Stormtrooper</td>
  223.                 <td>Cast</td>
  224.             </tr>
  225.             <tr>
  226.                 <td>Jon Berg</td>
  227.                 <td>Cantina Alien</td>
  228.                 <td>Cast</td>
  229.             </tr>
  230.             <tr>
  231.                 <td>Doug Beswick</td>
  232.                 <td>Cantina Alien</td>
  233.                 <td>Cast</td>
  234.             </tr>
  235.             <tr>
  236.                 <td>Paul Blake</td>
  237.                 <td>Greedo</td>
  238.                 <td>Cast</td>
  239.             </tr>
  240.             <tr>
  241.                 <td>Janice Burchette</td>
  242.                 <td>Nabrun Leids</td>
  243.                 <td>Cast</td>
  244.             </tr>
  245.         </tbody>
  246.     </table>
  247. <body>
  248.    
  249. </html>                  
  250.  
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!