week 5 - activity 6 - scrolling body & hover

index.html

<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>

script.js

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);

style.css

.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; }

week-5-activity-6-scrolling-body-hover.markdown

week 5 - activity 6 - scrolling body & hover

A Pen by Ivan Andreev on CodePen.

License.