Flexible data table with CSS Grid (resizable columns with good UX)

HTML

              
                <table>
  <thead>
    <tr>
      <th data-type="numeric">ID <span class="resize-handle"></span></th>
      <th data-type="text-short">First name <span class="resize-handle"></span></th>
      <th data-type="text-short">Last name <span class="resize-handle"></span></th>
      <th data-type="text-short">Email <span class="resize-handle"></span></th>
      <th data-type="text-long">Street <span class="resize-handle"></span></th>
      <th data-type="text-short">Country <span class="resize-handle"></span></th>
      <th data-type="text-long">University <span class="resize-handle"></span></th>
      <th data-type="text-short">IBAN <span class="resize-handle"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000001</td>
      <td>Lani</td>
      <td>Ovendale</td>
      <td>lovendale0@w3.org</td>
      <td>7850 Old Shore Drive</td>
      <td>United Kingdom</td>
      <td>University of Plymouth</td>
      <td>BG34 MPVP 8782 88EX H1CJ SC</td>
    </tr>
    <tr>
      <td>000002</td>
      <td>Israel</td>
      <td>Tassell</td>
      <td>itassell1@ow.ly</td>
      <td>245 Merchant Circle</td>
      <td>Macedonia</td>
      <td>South East European University</td>
      <td>FR11 4824 2942 41H9 XBHC 46P2 O86</td>
    </tr>
    <tr>
      <td>000003</td>
      <td>Eveleen</td>
      <td>Mercer</td>
      <td>emercer2@ow.ly</td>
      <td>70700 Kipling Pass</td>
      <td>Portugal</td>
      <td>Instituto Superior Novas Profissões - INP</td>
      <td>GR96 7559 456P GUAN WTAJ 3VPB S0P</td>
    </tr>
    <tr>
      <td>000004</td>
      <td>Conn</td>
      <td>Whitley</td>
      <td>cwhitley3@wsj.com</td>
      <td>03 Service Terrace</td>
      <td>Albania</td>
      <td>Epoka University</td>
      <td>LI59 1813 2T7T VKTO 6RKE X</td>
    </tr>
    <tr>
      <td>000005</td>
      <td>Cherye</td>
      <td>Smitheram</td>
      <td>csmitheram4@rambler.ru</td>
      <td>9 Eliot Parkway</td>
      <td>Indonesia</td>
      <td>Universitas Mahasaraswati Denpasar</td>
      <td>BR27 4570 4226 4255 5239 0197 316T J</td>
    </tr>
    <tr>
      <td>000006</td>
      <td>Bunnie</td>
      <td>Sked</td>
      <td>bsked5@51.la</td>
      <td>03418 Ludington Plaza</td>
      <td>Nigeria</td>
      <td>Federal University of Technology, Minna</td>
      <td>ES45 6721 1332 3288 6455 1242</td>
    </tr>
    <tr>
      <td>000007</td>
      <td>Helaine</td>
      <td>Crother</td>
      <td>hcrother6@opera.com</td>
      <td>7932 Sloan Park</td>
      <td>Philippines</td>
      <td>Saint Ferdinand College</td>
      <td>GB50 HFAD 8121 3729 9841 31</td>
    </tr>
    <tr>
      <td>000008</td>
      <td>Tana</td>
      <td>Ajean</td>
      <td>tajean7@sfgate.com</td>
      <td>2 Schurz Junction</td>
      <td>China</td>
      <td>Xi'an University of Electronic Science and Technology</td>
      <td>KZ85 7422 XDPB P2VQ H8SR</td>
    </tr>
    <tr>
      <td>000009</td>
      <td>Sollie</td>
      <td>Greenrde</td>
      <td>sgreenrde8@wikispaces.com</td>
      <td>055 Mockingbird Way</td>
      <td>Russia</td>
      <td>St. Petersburg State Mining Institute (Technical University)</td>
      <td>CH61 6423 9T4W WP0I 8MUK C</td>
    </tr>
    <tr>
      <td>000010</td>
      <td>Vernon</td>
      <td>Millington</td>
      <td>vmillington9@marketwatch.com</td>
      <td>74 David Pass</td>
      <td>Portugal</td>
      <td>Instituto Politécnico de Setúbal</td>
      <td>ES71 2390 0665 1601 8072 4924</td>
    </tr>
    <tr>
      <td>000011</td>
      <td>Willard</td>
      <td>Speares</td>
      <td>wspearesa@hao123.com</td>
      <td>4237 Moulton Park</td>
      <td>China</td>
      <td>Chongqing University of Science and Technology </td>
      <td>BE21 5598 4355 8287</td>
    </tr>
    <tr>
      <td>000012</td>
      <td>Minette</td>
      <td>Adderson</td>
      <td>maddersonb@netlog.com</td>
      <td>20 Westridge Crossing</td>
      <td>Philippines</td>
      <td>University of lloilo</td>
      <td>SI71 6487 6088 3774 839</td>
    </tr>
    <tr>
      <td>000013</td>
      <td>Madonna</td>
      <td>Richemont</td>
      <td>mrichemontc@nasa.gov</td>
      <td>46 Sherman Avenue</td>
      <td>Pakistan</td>
      <td>Punjab Institute of Computer science</td>
      <td>FO47 9031 2293 0020 12</td>
    </tr>
    <tr>
      <td>000014</td>
      <td>Osbourne</td>
      <td>Roscoe</td>
      <td>oroscoed@noaa.gov</td>
      <td>40 Sunnyside Lane</td>
      <td>South Africa</td>
      <td>University of South Africa</td>
      <td>FR23 5330 9279 24NB IC4T ZDH9 I74</td>
    </tr>
    <tr>
      <td>000015</td>
      <td>Kath</td>
      <td>Hancock</td>
      <td>khancocke@earthlink.net</td>
      <td>18570 Starling Pass</td>
      <td>Indonesia</td>
      <td>Politeknik Negeri Sambas</td>
      <td>LU79 248V TPNJ ZQHZ 0S4Q</td>
    </tr>
    <tr>
      <td>000016</td>
      <td>Aleta</td>
      <td>Doughartie</td>
      <td>adoughartief@typepad.com</td>
      <td>1440 Cherokee Place</td>
      <td>China</td>
      <td>Shenyang Pharmaceutical University</td>
      <td>GT19 CZJ0 WH8Y 4WI8 JPQJ AWNY TYF9</td>
    </tr>
    <tr>
      <td>000017</td>
      <td>Mirilla</td>
      <td>Worland</td>
      <td>mworlandg@mashable.com</td>
      <td>46597 Sunnyside Crossing</td>
      <td>Sweden</td>
      <td>Mälardalen University</td>
      <td>RS38 2407 6062 1886 8447 80</td>
    </tr>
    <tr>
      <td>000018</td>
      <td>Jena</td>
      <td>Creddon</td>
      <td>jcreddonh@bbc.co.uk</td>
      <td>611 Hanover Point</td>
      <td>New Zealand</td>
      <td>Christchurch Polytechnic Institute of Technology</td>
      <td>BH30 ZRXH ODUV MOSX OFZO C0</td>
    </tr>
    <tr>
      <td>000019</td>
      <td>De witt</td>
      <td>Hellcat</td>
      <td>dhellcati@microsoft.com</td>
      <td>3183 Cascade Drive</td>
      <td>Indonesia</td>
      <td>Institut Teknologi Bandung</td>
      <td>BA49 4027 6071 7896 3508</td>
    </tr>
    <tr>
      <td>000020</td>
      <td>Cleon</td>
      <td>Medgwick</td>
      <td>cmedgwickj@livejournal.com</td>
      <td>5712 Drewry Avenue</td>
      <td>China</td>
      <td>Shanghai University</td>
      <td>FR20 7714 6817 4685 SEL2 YP0U M08</td>
    </tr>
    <tr>
      <td>000021</td>
      <td>Caressa</td>
      <td>Aberchirder</td>
      <td>caberchirderk@mit.edu</td>
      <td>97 Fallview Junction</td>
      <td>France</td>
      <td>Université de Technologie de Compiègne</td>
      <td>FR70 3203 5174 02S6 6KGU YIJ7 866</td>
    </tr>
    <tr>
      <td>000022</td>
      <td>Dona</td>
      <td>Hindrich</td>
      <td>dhindrichl@google.com</td>
      <td>1 Judy Court</td>
      <td>United States</td>
      <td>St. John's College New Mexico</td>
      <td>TR88 6812 9R3F KLQV 7UGW 6KUC ZK</td>
    </tr>
    <tr>
      <td>000023</td>
      <td>Eryn</td>
      <td>Urrey</td>
      <td>eurreym@apache.org</td>
      <td>02 Delaware Place</td>
      <td>Indonesia</td>
      <td>Universitas Sumatera Utara</td>
      <td>RO39 QWVG UTYY DFHP GLXN 5AVB</td>
    </tr>
    <tr>
      <td>000024</td>
      <td>Chelsea</td>
      <td>Wildgoose</td>
      <td>cwildgoosen@behance.net</td>
      <td>087 Blue Bill Park Parkway</td>
      <td>Philippines</td>
      <td>Philippine Normal University</td>
      <td>FR13 5171 4360 67VL SKC2 7JV1 T98</td>
    </tr>
    <tr>
      <td>000025</td>
      <td>Edd</td>
      <td>Leffek</td>
      <td>eleffeko@msn.com</td>
      <td>39757 Forest Run Trail</td>
      <td>China</td>
      <td>Zhejiang Forestry University</td>
      <td>GT50 CAYK CCAK 8N5Y GATX GDC7 BLKX</td>
    </tr>
    <tr>
      <td>000026</td>
      <td>Nicol</td>
      <td>Le Barr</td>
      <td>nlebarrp@cocolog-nifty.com</td>
      <td>966 Manley Pass</td>
      <td>Belarus</td>
      <td>Belarussian State Academy of Music</td>
      <td>AE57 4203 4302 6701 7034 464</td>
    </tr>
    <tr>
      <td>000027</td>
      <td>Vonnie</td>
      <td>McGonigle</td>
      <td>vmcgonigleq@youku.com</td>
      <td>14 Cottonwood Place</td>
      <td>Albania</td>
      <td>Academy of Sports and Physical Training</td>
      <td>FR58 9328 1950 57IO EKDB XT4E W01</td>
    </tr>
    <tr>
      <td>000028</td>
      <td>Daffie</td>
      <td>Suche</td>
      <td>dsucher@wikia.com</td>
      <td>29 Crescent Oaks Parkway</td>
      <td>Indonesia</td>
      <td>Universitas Mataram</td>
      <td>MC82 1239 0144 47DG K10R PJ7C D13</td>
    </tr>
    <tr>
      <td>000029</td>
      <td>Shirlene</td>
      <td>Simper</td>
      <td>ssimpers@imageshack.us</td>
      <td>6115 Paget Park</td>
      <td>Paraguay</td>
      <td>Universidad Autónoma del Paraguay</td>
      <td>GR17 5976 8180 FEAA G6Y6 AU1S 7I5</td>
    </tr>
    <tr>
      <td>000030</td>
      <td>Sasha</td>
      <td>Huddles</td>
      <td>shuddlest@amazon.de</td>
      <td>979 Center Pass</td>
      <td>Nigeria</td>
      <td>Federal College Of Education (Technical), Akoka</td>
      <td>FO61 3603 8098 3978 26</td>
    </tr>
    <tr>
      <td>000031</td>
      <td>Derby</td>
      <td>Basler</td>
      <td>dbasleru@soundcloud.com</td>
      <td>666 Gulseth Point</td>
      <td>Laos</td>
      <td>Soutsaka Institute of management and Technology</td>
      <td>FR70 3298 4193 27RN N42L JAV5 P71</td>
    </tr>
    <tr>
      <td>000032</td>
      <td>Ricoriki</td>
      <td>Sykora</td>
      <td>rsykorav@tuttocitta.it</td>
      <td>266 Kennedy Drive</td>
      <td>China</td>
      <td>China Pharmaceutical University Nanjing</td>
      <td>VG64 UBHK 0733 7572 3779 1044</td>
    </tr>
    <tr>
      <td>000033</td>
      <td>Sidney</td>
      <td>Sargison</td>
      <td>ssargisonw@businessinsider.com</td>
      <td>5 Raven Drive</td>
      <td>Italy</td>
      <td>University of Italian Studies for Foreigners of Perugia</td>
      <td>BR74 1721 1313 2909 4374 0106 458L H</td>
    </tr>
    <tr>
      <td>000034</td>
      <td>Aleece</td>
      <td>Reilingen</td>
      <td>areilingenx@mlb.com</td>
      <td>664 Grim Drive</td>
      <td>France</td>
      <td>Université de Limoges</td>
      <td>FR66 0658 0047 76P6 NO5B FD5B E53</td>
    </tr>
    <tr>
      <td>000035</td>
      <td>Hieronymus</td>
      <td>Bernardin</td>
      <td>hbernardiny@hud.gov</td>
      <td>9451 Saint Paul Hill</td>
      <td>Burkina Faso</td>
      <td>Université de Ouagadougou</td>
      <td>MT40 PUPM 0146 6FZY TMGU OXV6 YVMG PNG</td>
    </tr>
    <tr>
      <td>000036</td>
      <td>Shara</td>
      <td>Mindenhall</td>
      <td>smindenhallz@nifty.com</td>
      <td>098 Luster Place</td>
      <td>Philippines</td>
      <td>Manuel L. Quezon University</td>
      <td>IS37 2792 3576 2239 0080 0929 97</td>
    </tr>
    <tr>
      <td>000037</td>
      <td>Rodney</td>
      <td>Everington</td>
      <td>reverington10@people.com.cn</td>
      <td>383 Westerfield Crossing</td>
      <td>Czech Republic</td>
      <td>Mendel University of Agriculture and Forestry</td>
      <td>PS12 DQYK HUW1 WGJL TKWG NN5Z 1E0B K</td>
    </tr>
    <tr>
      <td>000038</td>
      <td>Calvin</td>
      <td>Marke</td>
      <td>cmarke11@prweb.com</td>
      <td>598 Heath Trail</td>
      <td>Tuvalu</td>
      <td>Al Muthanna University</td>
      <td>MR88 0301 9435 2450 6678 0618 446</td>
    </tr>
    <tr>
      <td>000039</td>
      <td>Daloris</td>
      <td>Scandrite</td>
      <td>dscandrite12@java.com</td>
      <td>36329 Kensington Trail</td>
      <td>Canada</td>
      <td>University of Windsor</td>
      <td>FR57 8680 5195 87XH VVMU G86M L60</td>
    </tr>
    <tr>
      <td>000040</td>
      <td>Tove</td>
      <td>Taill</td>
      <td>ttaill13@cnbc.com</td>
      <td>526 Vahlen Crossing</td>
      <td>Belarus</td>
      <td>Belarussian State University of Informatics and Radioelectronics</td>
      <td>FO76 2813 6080 9783 71</td>
    </tr>
    <tr>
      <td>000041</td>
      <td>Linnea</td>
      <td>Gillingwater</td>
      <td>lgillingwater14@tamu.edu</td>
      <td>98 Spenser Way</td>
      <td>Israel</td>
      <td>Acdemic Center for Law and Business</td>
      <td>PK58 YJYC LWTY BWDZ 7TYD 8DBS</td>
    </tr>
    <tr>
      <td>000042</td>
      <td>Tina</td>
      <td>Jentle</td>
      <td>tjentle15@walmart.com</td>
      <td>7 Mccormick Alley</td>
      <td>Portugal</td>
      <td>Instituto Politécnico de Tomar</td>
      <td>FR31 7659 0600 133Q NER3 L5EX P10</td>
    </tr>
    <tr>
      <td>000043</td>
      <td>Waiter</td>
      <td>Boydle</td>
      <td>wboydle16@wired.com</td>
      <td>1 Center Point</td>
      <td>Ukraine</td>
      <td>Crimea State Medical University</td>
      <td>AZ18 GKKM FI8V 2GTE YGPZ PHMR LIZH</td>
    </tr>
    <tr>
      <td>000044</td>
      <td>Nydia</td>
      <td>Pescott</td>
      <td>npescott17@blogs.com</td>
      <td>41 Warrior Avenue</td>
      <td>Japan</td>
      <td>Ishinomaki Senshu University</td>
      <td>KZ85 378H ZVED RXYB 4BQW</td>
    </tr>
    <tr>
      <td>000045</td>
      <td>Birch</td>
      <td>Sergent</td>
      <td>bsergent18@youtube.com</td>
      <td>7 Utah Circle</td>
      <td>France</td>
      <td>Ecole Supérieure de Commerce de Toulouse</td>
      <td>FR06 0107 1068 96OI 8LVV 6SO8 I86</td>
    </tr>
    <tr>
      <td>000046</td>
      <td>Fran</td>
      <td>Belvard</td>
      <td>fbelvard19@archive.org</td>
      <td>69 Brickson Park Terrace</td>
      <td>Togo</td>
      <td>Université de Lomé</td>
      <td>FR18 2064 4825 32HG QKHB OSVQ 210</td>
    </tr>
    <tr>
      <td>000047</td>
      <td>Aurie</td>
      <td>Bills</td>
      <td>abills1a@ask.com</td>
      <td>69044 Esch Hill</td>
      <td>Russia</td>
      <td>Volgograd Medical Academy</td>
      <td>FI59 2922 4654 2674 93</td>
    </tr>
    <tr>
      <td>000048</td>
      <td>Aundrea</td>
      <td>O' Connell</td>
      <td>aoconnell1b@va.gov</td>
      <td>41372 Hagan Road</td>
      <td>El Salvador</td>
      <td>Universidad Técnica Latinoamericana</td>
      <td>FO32 5579 3550 3940 56</td>
    </tr>
    <tr>
      <td>000049</td>
      <td>Florenza</td>
      <td>Fevers</td>
      <td>ffevers1c@tumblr.com</td>
      <td>5 Twin Pines Plaza</td>
      <td>Madagascar</td>
      <td>Université d'Antananarivo</td>
      <td>RO25 QNQO HRXQ WNXP XRLJ PULO</td>
    </tr>
    <tr>
      <td>000050</td>
      <td>Urbano</td>
      <td>Baudinelli</td>
      <td>ubaudinelli1d@scribd.com</td>
      <td>98 Scofield Avenue</td>
      <td>China</td>
      <td>Zhejiang Gongshang University</td>
      <td>RS67 3228 8155 5103 0069 22</td>
    </tr>
    <tr>
      <td>000051</td>
      <td>Leonelle</td>
      <td>Stolte</td>
      <td>lstolte1e@marketwatch.com</td>
      <td>86512 Luster Trail</td>
      <td>Indonesia</td>
      <td>Universitas Kediri</td>
      <td>TR76 0439 4C2H 5Y2S 6ZHZ 0IFO SG</td>
    </tr>
    <tr>
      <td>000052</td>
      <td>Georgiana</td>
      <td>Yashanov</td>
      <td>gyashanov1f@theatlantic.com</td>
      <td>174 Corben Pass</td>
      <td>Indonesia</td>
      <td>Universitas Tidar Magelang</td>
      <td>MC91 0055 2801 70PQ CJ1A IWY2 Z77</td>
    </tr>
    <tr>
      <td>000053</td>
      <td>Carly</td>
      <td>Foottit</td>
      <td>cfoottit1g@deviantart.com</td>
      <td>0 Basil Street</td>
      <td>Indonesia</td>
      <td>Universitas Indonusa Esa Unggul</td>
      <td>LB27 0627 EDRT 2KSD 4EDC LQSY 171Z</td>
    </tr>
    <tr>
      <td>000054</td>
      <td>Frans</td>
      <td>Teas</td>
      <td>fteas1h@utexas.edu</td>
      <td>115 Farwell Road</td>
      <td>Russia</td>
      <td>Omsk State Pedagogical University</td>
      <td>NO80 2696 3735 396</td>
    </tr>
    <tr>
      <td>000055</td>
      <td>Joice</td>
      <td>Gate</td>
      <td>jgate1i@economist.com</td>
      <td>1 Northview Circle</td>
      <td>United States</td>
      <td>National College of Naturopathic Medicine</td>
      <td>AT04 5217 0257 5678 6498</td>
    </tr>
    <tr>
      <td>000056</td>
      <td>Merilee</td>
      <td>Winsom</td>
      <td>mwinsom1j@nationalgeographic.com</td>
      <td>5723 Alpine Pass</td>
      <td>Japan</td>
      <td>Hoshi University</td>
      <td>LT11 3360 3556 1669 6079</td>
    </tr>
    <tr>
      <td>000057</td>
      <td>Fannie</td>
      <td>Tummasutti</td>
      <td>ftummasutti1k@dion.ne.jp</td>
      <td>078 Nobel Circle</td>
      <td>Japan</td>
      <td>Shinshu University</td>
      <td>AT68 1262 2864 7227 7864</td>
    </tr>
    <tr>
      <td>000058</td>
      <td>Pete</td>
      <td>Kerner</td>
      <td>pkerner1l@youku.com</td>
      <td>3004 Tomscot Way</td>
      <td>Russia</td>
      <td>Kursk State Medical University</td>
      <td>FR43 5588 7450 03N0 EUB2 JGC6 E48</td>
    </tr>
    <tr>
      <td>000059</td>
      <td>Skip</td>
      <td>Wilne</td>
      <td>swilne1m@alexa.com</td>
      <td>59 2nd Court</td>
      <td>Indonesia</td>
      <td>Universitas Jayabaya</td>
      <td>SA39 32WK VTJ9 BILO GESP VFX2</td>
    </tr>
    <tr>
      <td>000060</td>
      <td>Pall</td>
      <td>Curner</td>
      <td>pcurner1n@mapquest.com</td>
      <td>57885 Hudson Place</td>
      <td>Russia</td>
      <td>Tomsk State University of Control Systems and Radioelectronics</td>
      <td>MT30 PNHV 4276 5H0X 7AGN R62T VGBQ T1J</td>
    </tr>
    <tr>
      <td>000061</td>
      <td>Katti</td>
      <td>Jacobbe</td>
      <td>kjacobbe1o@wikia.com</td>
      <td>4 Glacier Hill Parkway</td>
      <td>Poland</td>
      <td>Technical University of Lodz</td>
      <td>CH08 9910 27TS KGDI 47VI 7</td>
    </tr>
    <tr>
      <td>000062</td>
      <td>Giraud</td>
      <td>McAlarney</td>
      <td>gmcalarney1p@nyu.edu</td>
      <td>39 Bay Hill</td>
      <td>Canada</td>
      <td>Mount Allison University</td>
      <td>FR02 1304 2863 40WK SDPD PUHG S70</td>
    </tr>
    <tr>
      <td>000063</td>
      <td>Wyatan</td>
      <td>Josuweit</td>
      <td>wjosuweit1q@rambler.ru</td>
      <td>276 Bunker Hill Road</td>
      <td>Canada</td>
      <td>University of Victoria</td>
      <td>LI89 6102 0QYQ K0J7 B6KH E</td>
    </tr>
    <tr>
      <td>000064</td>
      <td>Xaviera</td>
      <td>Gilder</td>
      <td>xgilder1r@bravesites.com</td>
      <td>9 Prairieview Junction</td>
      <td>United States</td>
      <td>Baptist Bible College of Pennsylvania</td>
      <td>LV10 FSJG OU3S KYSX LVJI E</td>
    </tr>
    <tr>
      <td>000065</td>
      <td>Ambrose</td>
      <td>Olwen</td>
      <td>aolwen1s@tmall.com</td>
      <td>541 Spaight Road</td>
      <td>Russia</td>
      <td>Volgograd State University of Architecture and Civil Engineering (VolgGASU)</td>
      <td>IS41 3056 7152 7476 6808 0819 29</td>
    </tr>
    <tr>
      <td>000066</td>
      <td>Mariana</td>
      <td>Sidden</td>
      <td>msidden1t@harvard.edu</td>
      <td>29 Eliot Place</td>
      <td>Philippines</td>
      <td>University of the East, Coloocan</td>
      <td>KZ23 7664 JFOZ W5SS 4DG2</td>
    </tr>
    <tr>
      <td>000067</td>
      <td>Roi</td>
      <td>Behning</td>
      <td>rbehning1u@discuz.net</td>
      <td>215 Russell Court</td>
      <td>Japan</td>
      <td>Tokyo Gakugei University</td>
      <td>LU48 706B MFNK OEPN FBTQ</td>
    </tr>
    <tr>
      <td>000068</td>
      <td>Fransisco</td>
      <td>Phelit</td>
      <td>fphelit1v@networkadvertising.org</td>
      <td>49 Killdeer Trail</td>
      <td>Russia</td>
      <td>Kemerovo State University</td>
      <td>FR30 6212 1519 25TZ DUBU EZOJ Y06</td>
    </tr>
    <tr>
      <td>000069</td>
      <td>Zonnya</td>
      <td>Shwenn</td>
      <td>zshwenn1w@usatoday.com</td>
      <td>56 Chive Lane</td>
      <td>Indonesia</td>
      <td>Universitas Putera Batam</td>
      <td>PT06 5208 0281 5407 7419 0491 1</td>
    </tr>
    <tr>
      <td>000070</td>
      <td>Nadiya</td>
      <td>Zum Felde</td>
      <td>nzumfelde1x@cdc.gov</td>
      <td>767 Lyons Park</td>
      <td>Belarus</td>
      <td>Vitebsk State Medical University</td>
      <td>IE09 PMDL 0852 7020 9037 94</td>
    </tr>
    <tr>
      <td>000071</td>
      <td>Rickie</td>
      <td>Laydel</td>
      <td>rlaydel1y@nytimes.com</td>
      <td>826 Warner Pass</td>
      <td>China</td>
      <td>Chengdu University of Technology</td>
      <td>IT38 X742 3487 765J F9AQ 5DTP LXB</td>
    </tr>
    <tr>
      <td>000072</td>
      <td>Bartel</td>
      <td>Chadwen</td>
      <td>bchadwen1z@google.ca</td>
      <td>67 Mccormick Place</td>
      <td>Albania</td>
      <td>Agricultural University of Tirane</td>
      <td>GI13 SWEY HZRF H032 PPC4 IIN</td>
    </tr>
    <tr>
      <td>000073</td>
      <td>Bili</td>
      <td>Devanny</td>
      <td>bdevanny20@deliciousdays.com</td>
      <td>46899 3rd Park</td>
      <td>Vietnam</td>
      <td>FPT University</td>
      <td>ES87 7017 1997 4643 0740 3181</td>
    </tr>
    <tr>
      <td>000074</td>
      <td>Gonzales</td>
      <td>Beaty</td>
      <td>gbeaty21@istockphoto.com</td>
      <td>8692 Roth Terrace</td>
      <td>China</td>
      <td>Shanxi University</td>
      <td>AZ46 LMAB 17CO A0FE BVR3 SGIU 1AAT</td>
    </tr>
    <tr>
      <td>000075</td>
      <td>Guy</td>
      <td>Sporrij</td>
      <td>gsporrij22@economist.com</td>
      <td>4176 Fallview Drive</td>
      <td>Thailand</td>
      <td>Webster University, Thailand</td>
      <td>FR52 0417 1752 51WT AENP 8TOR L31</td>
    </tr>
    <tr>
      <td>000076</td>
      <td>Valdemar</td>
      <td>Kelberman</td>
      <td>vkelberman23@jalbum.net</td>
      <td>95 Lake View Circle</td>
      <td>Poland</td>
      <td>European Academy of Arts in Warsaw</td>
      <td>MT25 WXMB 7091 81VN FMRT YNM2 I70B BNS</td>
    </tr>
    <tr>
      <td>000077</td>
      <td>Fletch</td>
      <td>Meneghelli</td>
      <td>fmeneghelli24@google.com.au</td>
      <td>20 Superior Road</td>
      <td>Russia</td>
      <td>Vaganova Academy of Russian Ballet</td>
      <td>CH12 9538 9QIN Q8EV F4P6 S</td>
    </tr>
    <tr>
      <td>000078</td>
      <td>Adel</td>
      <td>Lansberry</td>
      <td>alansberry25@tripadvisor.com</td>
      <td>3791 Rieder Trail</td>
      <td>Colombia</td>
      <td>Fundación Universitaria del Area Andina. Sede Pereira</td>
      <td>SK37 7152 6293 3100 7282 4066</td>
    </tr>
    <tr>
      <td>000079</td>
      <td>Vernon</td>
      <td>Maulkin</td>
      <td>vmaulkin26@va.gov</td>
      <td>21191 Grasskamp Way</td>
      <td>China</td>
      <td>Southwest University of Science and Technology</td>
      <td>MC80 0705 3276 31WU 8W0V TIEH 597</td>
    </tr>
    <tr>
      <td>000080</td>
      <td>Kennett</td>
      <td>Goldston</td>
      <td>kgoldston27@usatoday.com</td>
      <td>9002 Carioca Lane</td>
      <td>Brazil</td>
      <td>Universidade Metodista de Piracicaba</td>
      <td>GT07 PFFC IX4L 2L6X 9FBO U8FH 8P10</td>
    </tr>
    <tr>
      <td>000081</td>
      <td>Malchy</td>
      <td>Gillitt</td>
      <td>mgillitt28@drupal.org</td>
      <td>2633 Glendale Junction</td>
      <td>Russia</td>
      <td>Kazan State Academy of Architecture and Civil Engineering</td>
      <td>BG25 CPTO 9300 01ZQ QKZR QC</td>
    </tr>
    <tr>
      <td>000082</td>
      <td>Cletis</td>
      <td>Harring</td>
      <td>charring29@prweb.com</td>
      <td>5174 Packers Court</td>
      <td>Portugal</td>
      <td>Instituto Superior de Gestão - ISG</td>
      <td>SM40 Z439 3471 551X 2LQF XPAZ CIM</td>
    </tr>
    <tr>
      <td>000083</td>
      <td>Avigdor</td>
      <td>Brede</td>
      <td>abrede2a@liveinternet.ru</td>
      <td>4696 Fisk Center</td>
      <td>Indonesia</td>
      <td>Institut Teknologi Bandung</td>
      <td>MD81 RJ5E WP8P 3X2X R70Q PAS2</td>
    </tr>
    <tr>
      <td>000084</td>
      <td>Brand</td>
      <td>Bartos</td>
      <td>bbartos2b@ca.gov</td>
      <td>855 Warbler Road</td>
      <td>Greece</td>
      <td>Hellenic Army Academy</td>
      <td>PS52 CANZ ZJWI KB60 I58U ALNE FBWK H</td>
    </tr>
    <tr>
      <td>000085</td>
      <td>Auria</td>
      <td>Dornan</td>
      <td>adornan2c@google.cn</td>
      <td>69821 Beilfuss Terrace</td>
      <td>Comoros</td>
      <td>Université des Antilles et de la Guyane</td>
      <td>SE14 4415 8768 0025 6257 4953</td>
    </tr>
    <tr>
      <td>000086</td>
      <td>Kiley</td>
      <td>Asaaf</td>
      <td>kasaaf2d@wix.com</td>
      <td>97 Luster Street</td>
      <td>Venezuela</td>
      <td>Universidad José Maria Vargas</td>
      <td>AT52 3410 8243 4120 6922</td>
    </tr>
    <tr>
      <td>000087</td>
      <td>Angel</td>
      <td>Drinan</td>
      <td>adrinan2e@ow.ly</td>
      <td>51231 Russell Center</td>
      <td>China</td>
      <td>Xi'an Jiaotong University</td>
      <td>SK32 0734 4505 2565 0951 4548</td>
    </tr>
    <tr>
      <td>000088</td>
      <td>Trey</td>
      <td>Garlick</td>
      <td>tgarlick2f@stumbleupon.com</td>
      <td>82338 1st Hill</td>
      <td>Colombia</td>
      <td>Universidad del Valle del Cauca</td>
      <td>CY52 5878 8878 NN29 VLZO VK0Z 6DPY</td>
    </tr>
    <tr>
      <td>000089</td>
      <td>Albertine</td>
      <td>Lowre</td>
      <td>alowre2g@hud.gov</td>
      <td>62431 Hudson Parkway</td>
      <td>Czech Republic</td>
      <td>University of Education Hradec Kralove</td>
      <td>FI61 8982 0476 9940 56</td>
    </tr>
    <tr>
      <td>000090</td>
      <td>Adriena</td>
      <td>Shoppee</td>
      <td>ashoppee2h@si.edu</td>
      <td>2 Veith Center</td>
      <td>Indonesia</td>
      <td>Universitas Kristen Petra</td>
      <td>CR10 2128 8657 0621 6271 9</td>
    </tr>
    <tr>
      <td>000091</td>
      <td>Reg</td>
      <td>Attwooll</td>
      <td>rattwooll2i@vimeo.com</td>
      <td>4 Fairview Park</td>
      <td>China</td>
      <td>Jingdezhen China Institute</td>
      <td>FR73 6513 3899 53TZ YRFC VTBB K98</td>
    </tr>
    <tr>
      <td>000092</td>
      <td>Tess</td>
      <td>Giovanetti</td>
      <td>tgiovanetti2j@usatoday.com</td>
      <td>3856 Kim Trail</td>
      <td>Ukraine</td>
      <td>Sumy State University</td>
      <td>FR43 2472 2037 70QS PT7A XCPM J01</td>
    </tr>
    <tr>
      <td>000093</td>
      <td>Trix</td>
      <td>Boddie</td>
      <td>tboddie2k@stumbleupon.com</td>
      <td>29010 Mosinee Plaza</td>
      <td>Greece</td>
      <td>International Hellenic University</td>
      <td>AZ51 HKZB FGIX DQSJ GM6A ISWS NUBU</td>
    </tr>
    <tr>
      <td>000094</td>
      <td>Kelsy</td>
      <td>Sidgwick</td>
      <td>ksidgwick2l@newyorker.com</td>
      <td>565 Merrick Place</td>
      <td>Sweden</td>
      <td>University College of Borås</td>
      <td>IT95 S608 3151 3104 AOQU W5OX WNC</td>
    </tr>
    <tr>
      <td>000095</td>
      <td>Brit</td>
      <td>Camelia</td>
      <td>bcamelia2m@51.la</td>
      <td>436 Katie Junction</td>
      <td>Malaysia</td>
      <td>Universiti Tenaga Nasional</td>
      <td>MC83 5681 3920 91DX Z5QE 5DW1 K64</td>
    </tr>
    <tr>
      <td>000096</td>
      <td>Shelby</td>
      <td>Jays</td>
      <td>sjays2n@cbc.ca</td>
      <td>903 Blackbird Center</td>
      <td>Sweden</td>
      <td>Stockholm Institute of Education</td>
      <td>CH87 6031 3UVI HUWJ LYNX 5</td>
    </tr>
    <tr>
      <td>000097</td>
      <td>Crosby</td>
      <td>Marron</td>
      <td>cmarron2o@stumbleupon.com</td>
      <td>92129 Debs Avenue</td>
      <td>United States</td>
      <td>Adler School of Professional Psychology</td>
      <td>LU95 683P 3RT0 MDNH ITYS</td>
    </tr>
    <tr>
      <td>000098</td>
      <td>Betteanne</td>
      <td>Cornick</td>
      <td>bcornick2p@theatlantic.com</td>
      <td>2987 Prairieview Avenue</td>
      <td>Sweden</td>
      <td>Mälardalen University</td>
      <td>AD82 2183 2056 OJWZ GYIF ARLV</td>
    </tr>
    <tr>
      <td>000099</td>
      <td>Quintana</td>
      <td>Ithell</td>
      <td>qithell2q@hud.gov</td>
      <td>50 Melody Plaza</td>
      <td>Uzbekistan</td>
      <td>National University of Uzbekistan</td>
      <td>FR66 4433 2587 202T TVCH MREV D83</td>
    </tr>
    <tr>
      <td>000100</td>
      <td>Tyrus</td>
      <td>Dealey</td>
      <td>tdealey2r@oaic.gov.au</td>
      <td>866 Summerview Point</td>
      <td>United States</td>
      <td>Jarvis Christian College</td>
      <td>FR52 8407 9410 570M BBLX EZFH 092</td>
    </tr>
  </tbody>
</table>

CSS

              
                * {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

table {
  min-width: 100vw;
  width: auto;
  flex: 1;
  display: grid;
  border-collapse: collapse;
  /* These are just initial values which are overriden using JavaScript when a column is resized */
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

thead,
tbody,
tr {
  display: contents;
}

th,
td {
  padding: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  background: #6c7ae0;
  text-align: left;
  font-weight: normal;
  font-size: 1.1rem;
  color: white;
}

th:last-child {
  border: 0;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0;
  width: 3px;
  cursor: col-resize;
}

.resize-handle:hover,
/* The following selector is needed so the handle is visible during resize even if the mouse isn't over the handle anymore */
.header--being-resized .resize-handle {
  opacity: 0.5;
}

th:hover .resize-handle {
  opacity: 0.3;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #808080;
}

tr:nth-child(even) td {
  background: #f8f6ff;
}

JS

              
                // Our real web app uses Vue.js but I'll stick to plain JavaScript here

const min = 150;
// The max (fr) values for grid-template-columns
const columnTypeToRatioMap = {
  numeric: 1,
  'text-short': 1.67,
  'text-long': 3.33,
};

const table = document.querySelector('table');
/*
  The following will soon be filled with column objects containing
  the header element and their size value for grid-template-columns 
*/
const columns = [];
let headerBeingResized;

// The next three functions are mouse event callbacks

// Where the magic happens. I.e. when they're actually resizing
const onMouseMove = (e) => requestAnimationFrame(() => {
  console.log('onMouseMove');
  
  // Calculate the desired width
  horizontalScrollOffset = document.documentElement.scrollLeft;
  const width = (horizontalScrollOffset + e.clientX) - headerBeingResized.offsetLeft;
  
  // Update the column object with the new size value
  const column = columns.find(({ header }) => header === headerBeingResized);
  column.size = Math.max(min, width) + 'px'; // Enforce our minimum
  
  // For the other headers which don't have a set width, fix it to their computed width
  columns.forEach((column) => {
    if(column.size.startsWith('minmax')){ // isn't fixed yet (it would be a pixel value otherwise)
      column.size = parseInt(column.header.clientWidth, 10) + 'px';
    }
  });
  
  /* 
    Update the column sizes
    Reminder: grid-template-columns sets the width for all columns in one value
  */
  table.style.gridTemplateColumns = columns
    .map(({ header, size }) => size)
    .join(' ');
});

// Clean up event listeners, classes, etc.
const onMouseUp = () => {
  console.log('onMouseUp');
  
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
  headerBeingResized.classList.remove('header--being-resized');
  headerBeingResized = null;
};

// Get ready, they're about to resize
const initResize = ({ target }) => {
  console.log('initResize');
  
  headerBeingResized = target.parentNode;
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', onMouseUp);
  headerBeingResized.classList.add('header--being-resized');
};

// Let's populate that columns array and add listeners to the resize handles
document.querySelectorAll('th').forEach((header) => {
  const max = columnTypeToRatioMap[header.dataset.type] + 'fr';
  columns.push({ 
    header, 
    // The initial size value for grid-template-columns:
    size: `minmax(${min}px, ${max})`,
  });
  header.querySelector('.resize-handle').addEventListener('mousedown', initResize);
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions