Skip to content

Instantly share code, notes, and snippets.

@ivandeex
Created September 9, 2017 19:31
Show Gist options
  • Save ivandeex/62db3393fada9b46336bf7cf95ee3bae to your computer and use it in GitHub Desktop.
Save ivandeex/62db3393fada9b46336bf7cf95ee3bae to your computer and use it in GitHub Desktop.
week 5 - activity 6 - scrolling body & hover
<div class="scroll-wrap">
<table class="tbody-scroll">
<thead>
<tr> <th>Name</th> <th>phone</th> <th>Abyrvalg</th> </tr>
</thead>
<tbody>
<tr> <td>AAAA</td> <td>323232</td> <td>Lorem ipsum and a very long cell text</td> </tr>
<tr> <td>BB</> <td>323232</td> <td>Dolor</td> </tr>
<tr> <td>CCC</> <td>3435656</td> <td>Sit amet</td> </tr>
<tr> <td>AAAA</td> <td>323232</td> <td>Lorem ipsum</td> </tr>
<tr> <td>BBBBB</td> <td>323232</td> <td>Dolor</td> </tr>
<tr> <td>CCCCC</td> <td colspan="2">Sit amet</td> </tr>
<tr> <td>AAAA</td> <td>323232</td> <td>Lorem ipsum</td> </tr>
<tr> <td>BBBBB</td> <td>323232</td> <td>Dolor</td> </tr>
<tr> <td>CCCCC</td> <td colspan="2">Sit amet</td> </tr>
<tr> <td>AAAA</td> <td>323232</td> <td>Lorem ipsum</td> </tr>
<tr> <td>BBBBB</td> <td>323232</td> <td>Dolor</td> </tr>
<tr> <td>CCCCC</td> <td colspan="2">Sit amet</td> </tr>
</tbody>
<tfoot> <tr> <th>Summary...</th> </tr> </tfoot>
</table>
</div>
document.addEventListener("DOMContentLoaded", function() {
if (typeof window.orientation !== "undefined") {
document.querySelector("table thead").style.width =
document.querySelector("table tfoot").style.width =
document.querySelector("table tbody tr").clientWidth + "px";
}
}, false);
.scroll-wrap { max-width: 100%; overflow: auto; }
table { width: 90vw; min-width: 300px; }
tbody { max-height: 50vh; }
tbody { display: block; overflow-y: scroll; }
thead, tfoot, tbody tr { display: table; table-layout: fixed; }
tbody tr { width: calc(100% - 1px); }
thead, tfoot { width: calc(100% - 1em - 2px); }
table th, table td { padding: 10px 5px; overflow: hidden; }
table, tbody tr { border-collapse: collapse; }
table, table th, table td { border: 1px solid maroon; }
tbody tr td { border-top: none; }
tbody tr:last-child td { border-bottom: none; }
thead th { border-bottom-width: 2px; }
tfoot th { border-top-width: 2px; }
thead, tfoot { background-color: rosybrown; color: white; }
tbody tr:nth-child(odd) { background-color: ivory; }
tbody tr:nth-child(even) { background-color: linen; }
tbody td[colspan], tbody td[rowspan] { background-color: mistyrose; }
tbody tr:hover td { background-color: aliceblue; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment