285 lines
14 KiB
HTML
285 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Scrolling grid</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<h1>Accessible fixed header grid</h1>
|
|
<p>Demonstration of css-only grid with scrolling body. Uses grid role for testing/demonstration purposes, despite currently having no interaction.</p>
|
|
|
|
<p>Two implementation details are worth noting: Edge does not support ARIA grid/table rows on semantic table elements, so all elements in this example are divs. Second, <code>role="rowgroup"</code> is not supported, so it has not been used.</p>
|
|
|
|
<h2 id="table-heading">Randomly generated employee data</h2>
|
|
<div role="grid" aria-readonly="true" aria-labelledby="table-heading" class="grid">
|
|
<div role="presentation" class="header">
|
|
<div role="row" class="row">
|
|
<div role="columnheader" class="col">First</div>
|
|
<div role="columnheader" class="col">Last</div>
|
|
<div role="columnheader" class="col">Email</div>
|
|
<div role="columnheader" class="col">Company</div>
|
|
<div role="columnheader" class="col">Location</div>
|
|
</div>
|
|
</div>
|
|
<div role="presentation" class="body">
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Mufutau</div>
|
|
<div role="gridcell" class="cell">Stanley</div>
|
|
<div role="gridcell" class="cell">aliquet.lobortis.nisi@quisurnaNunc.com</div>
|
|
<div role="gridcell" class="cell">Suspendisse Sed Company</div>
|
|
<div role="gridcell" class="cell">Cocos (Keeling) Islands</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Rama</div>
|
|
<div role="gridcell" class="cell">Pollard</div>
|
|
<div role="gridcell" class="cell">augue@enimconsequatpurus.co.uk</div>
|
|
<div role="gridcell" class="cell">Amet Lorem Corporation</div>
|
|
<div role="gridcell" class="cell">Saint Kitts and Nevis</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Joseph</div>
|
|
<div role="gridcell" class="cell">Clemons</div>
|
|
<div role="gridcell" class="cell">enim.nisl.elementum@dignissimmagna.org</div>
|
|
<div role="gridcell" class="cell">Molestie Tortor Nibh Corporation</div>
|
|
<div role="gridcell" class="cell">Timor-Leste</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Owen</div>
|
|
<div role="gridcell" class="cell">Mclean</div>
|
|
<div role="gridcell" class="cell">tellus.id@amet.net</div>
|
|
<div role="gridcell" class="cell">Blandit Nam Nulla Associates</div>
|
|
<div role="gridcell" class="cell">Moldova</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Yvette</div>
|
|
<div role="gridcell" class="cell">Carpenter</div>
|
|
<div role="gridcell" class="cell">congue.elit@iaculis.com</div>
|
|
<div role="gridcell" class="cell">A Neque Nullam Company</div>
|
|
<div role="gridcell" class="cell">Norway</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Baker</div>
|
|
<div role="gridcell" class="cell">Davidson</div>
|
|
<div role="gridcell" class="cell">ornare.In@Seddiamlorem.ca</div>
|
|
<div role="gridcell" class="cell">Mauris Vel Ltd</div>
|
|
<div role="gridcell" class="cell">Anguilla</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Zena</div>
|
|
<div role="gridcell" class="cell">Myers</div>
|
|
<div role="gridcell" class="cell">ante.ipsum@ac.ca</div>
|
|
<div role="gridcell" class="cell">Eu Odio Tristique Institute</div>
|
|
<div role="gridcell" class="cell">Colombia</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Nora</div>
|
|
<div role="gridcell" class="cell">Vaughn</div>
|
|
<div role="gridcell" class="cell">ut.nulla.Cras@inconsectetueripsum.net</div>
|
|
<div role="gridcell" class="cell">Varius Et Limited</div>
|
|
<div role="gridcell" class="cell">Switzerland</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Nero</div>
|
|
<div role="gridcell" class="cell">Mullen</div>
|
|
<div role="gridcell" class="cell">Donec.feugiat.metus@sedleo.co.uk</div>
|
|
<div role="gridcell" class="cell">Consequat Consulting</div>
|
|
<div role="gridcell" class="cell">Sudan</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Patience</div>
|
|
<div role="gridcell" class="cell">Mosley</div>
|
|
<div role="gridcell" class="cell">dictum.Phasellus@id.org</div>
|
|
<div role="gridcell" class="cell">Eleifend Non Dapibus Corp.</div>
|
|
<div role="gridcell" class="cell">Bahamas</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Riley</div>
|
|
<div role="gridcell" class="cell">Jenkins</div>
|
|
<div role="gridcell" class="cell">Maecenas.ornare.egestas@ProindolorNulla.net</div>
|
|
<div role="gridcell" class="cell">Integer Mollis Integer Consulting</div>
|
|
<div role="gridcell" class="cell">Saint Helena, Ascension and Tristan da Cunha</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Dillon</div>
|
|
<div role="gridcell" class="cell">Compton</div>
|
|
<div role="gridcell" class="cell">aliquet.sem.ut@libero.edu</div>
|
|
<div role="gridcell" class="cell">Ligula Aenean Gravida LLP</div>
|
|
<div role="gridcell" class="cell">Sao Tome and Principe</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Benedict</div>
|
|
<div role="gridcell" class="cell">Frank</div>
|
|
<div role="gridcell" class="cell">nunc.id@Aliquamnec.co.uk</div>
|
|
<div role="gridcell" class="cell">Mauris Magna Duis Institute</div>
|
|
<div role="gridcell" class="cell">Senegal</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Risa</div>
|
|
<div role="gridcell" class="cell">Dawson</div>
|
|
<div role="gridcell" class="cell">In@ullamcorper.net</div>
|
|
<div role="gridcell" class="cell">Consectetuer Corp.</div>
|
|
<div role="gridcell" class="cell">Norfolk Island</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Amir</div>
|
|
<div role="gridcell" class="cell">Moses</div>
|
|
<div role="gridcell" class="cell">lobortis.ultrices@tellusNunclectus.edu</div>
|
|
<div role="gridcell" class="cell">Mattis Ltd</div>
|
|
<div role="gridcell" class="cell">Azerbaijan</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Katell</div>
|
|
<div role="gridcell" class="cell">Murray</div>
|
|
<div role="gridcell" class="cell">interdum.Nunc@eutellus.ca</div>
|
|
<div role="gridcell" class="cell">Sem Consulting</div>
|
|
<div role="gridcell" class="cell">Reunion</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Justin</div>
|
|
<div role="gridcell" class="cell">Johns</div>
|
|
<div role="gridcell" class="cell">quam@pedeCum.org</div>
|
|
<div role="gridcell" class="cell">Ante Vivamus Incorporated</div>
|
|
<div role="gridcell" class="cell">Moldova</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">India</div>
|
|
<div role="gridcell" class="cell">Reese</div>
|
|
<div role="gridcell" class="cell">nunc.nulla@Proin.org</div>
|
|
<div role="gridcell" class="cell">Pede LLC</div>
|
|
<div role="gridcell" class="cell">Fiji</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Zeph</div>
|
|
<div role="gridcell" class="cell">Mccoy</div>
|
|
<div role="gridcell" class="cell">Suspendisse@quam.co.uk</div>
|
|
<div role="gridcell" class="cell">Montes Nascetur Ridiculus Company</div>
|
|
<div role="gridcell" class="cell">Cocos (Keeling) Islands</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Kendall</div>
|
|
<div role="gridcell" class="cell">Sharp</div>
|
|
<div role="gridcell" class="cell">euismod@adui.org</div>
|
|
<div role="gridcell" class="cell">Nulla Tempor Foundation</div>
|
|
<div role="gridcell" class="cell">Burundi</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Rylee</div>
|
|
<div role="gridcell" class="cell">Olsen</div>
|
|
<div role="gridcell" class="cell">erat@Pellentesque.com</div>
|
|
<div role="gridcell" class="cell">Fermentum Arcu Consulting</div>
|
|
<div role="gridcell" class="cell">Reunion</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Alyssa</div>
|
|
<div role="gridcell" class="cell">Black</div>
|
|
<div role="gridcell" class="cell">pharetra@enim.ca</div>
|
|
<div role="gridcell" class="cell">Porttitor Interdum Incorporated</div>
|
|
<div role="gridcell" class="cell">Curaçao</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Ainsley</div>
|
|
<div role="gridcell" class="cell">Morse</div>
|
|
<div role="gridcell" class="cell">dictum@odioauctor.org</div>
|
|
<div role="gridcell" class="cell">Sit Ltd</div>
|
|
<div role="gridcell" class="cell">New Caledonia</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Ira</div>
|
|
<div role="gridcell" class="cell">Sawyer</div>
|
|
<div role="gridcell" class="cell">Proin.dolor@temporarcu.net</div>
|
|
<div role="gridcell" class="cell">Duis Gravida Consulting</div>
|
|
<div role="gridcell" class="cell">Cameroon</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Keith</div>
|
|
<div role="gridcell" class="cell">Mccullough</div>
|
|
<div role="gridcell" class="cell">tincidunt.nibh@ipsumsodalespurus.ca</div>
|
|
<div role="gridcell" class="cell">Mauris Morbi Foundation</div>
|
|
<div role="gridcell" class="cell">Malawi</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Andrew</div>
|
|
<div role="gridcell" class="cell">Combs</div>
|
|
<div role="gridcell" class="cell">rhoncus.id@ridiculusmus.ca</div>
|
|
<div role="gridcell" class="cell">Vestibulum Limited</div>
|
|
<div role="gridcell" class="cell">British Indian Ocean Territory</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Jorden</div>
|
|
<div role="gridcell" class="cell">Sampson</div>
|
|
<div role="gridcell" class="cell">facilisis@maurisipsumporta.com</div>
|
|
<div role="gridcell" class="cell">Ut Eros Limited</div>
|
|
<div role="gridcell" class="cell">Tonga</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Whitney</div>
|
|
<div role="gridcell" class="cell">Graham</div>
|
|
<div role="gridcell" class="cell">erat.vel@ametnulla.edu</div>
|
|
<div role="gridcell" class="cell">Commodo Corp.</div>
|
|
<div role="gridcell" class="cell">Northern Mariana Islands</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Isadora</div>
|
|
<div role="gridcell" class="cell">Hinton</div>
|
|
<div role="gridcell" class="cell">velit@Phasellus.edu</div>
|
|
<div role="gridcell" class="cell">Nec Tempus Mauris Corp.</div>
|
|
<div role="gridcell" class="cell">Slovenia</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Vernon</div>
|
|
<div role="gridcell" class="cell">Rose</div>
|
|
<div role="gridcell" class="cell">a@Quisquepurus.edu</div>
|
|
<div role="gridcell" class="cell">Fusce Dolor Quam Consulting</div>
|
|
<div role="gridcell" class="cell">Maldives</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Micah</div>
|
|
<div role="gridcell" class="cell">Reid</div>
|
|
<div role="gridcell" class="cell">mauris.eu.elit@euaccumsansed.edu</div>
|
|
<div role="gridcell" class="cell">Pellentesque Massa LLC</div>
|
|
<div role="gridcell" class="cell">Guadeloupe</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Dalton</div>
|
|
<div role="gridcell" class="cell">Oconnor</div>
|
|
<div role="gridcell" class="cell">turpis.vitae.purus@MaurismagnaDuis.edu</div>
|
|
<div role="gridcell" class="cell">Laoreet Libero Et Incorporated</div>
|
|
<div role="gridcell" class="cell">Nepal</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Aiko</div>
|
|
<div role="gridcell" class="cell">Floyd</div>
|
|
<div role="gridcell" class="cell">nascetur@torquentper.net</div>
|
|
<div role="gridcell" class="cell">Rutrum LLC</div>
|
|
<div role="gridcell" class="cell">Kazakhstan</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Abel</div>
|
|
<div role="gridcell" class="cell">Rollins</div>
|
|
<div role="gridcell" class="cell">vitae.semper@sempercursus.edu</div>
|
|
<div role="gridcell" class="cell">Nibh Enim Inc.</div>
|
|
<div role="gridcell" class="cell">Faroe Islands</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Fallon</div>
|
|
<div role="gridcell" class="cell">Hayes</div>
|
|
<div role="gridcell" class="cell">tincidunt.nibh@duiquisaccumsan.net</div>
|
|
<div role="gridcell" class="cell">Sagittis Semper Foundation</div>
|
|
<div role="gridcell" class="cell">Guinea</div>
|
|
</div>
|
|
<div role="row" class="row">
|
|
<div role="gridcell" class="cell">Lillian</div>
|
|
<div role="gridcell" class="cell">Bowen</div>
|
|
<div role="gridcell" class="cell">quam.quis.diam@eleifendnon.net</div>
|
|
<div role="gridcell" class="cell">Sem Mollis Dui Industries</div>
|
|
<div role="gridcell" class="cell">Comoros</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
|
|
</body>
|
|
</html> |