Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@RasmusFonseca

RasmusFonseca/scrollable-table.html

Created May 19, 2017 20:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RasmusFonseca/d17e218f64a765c630fb7b78dc4cb97f to your computer and use it in GitHub Desktop.
Save RasmusFonseca/d17e218f64a765c630fb7b78dc4cb97f to your computer and use it in GitHub Desktop.
Download ZIP
Scrollable table body
Raw
scrollable-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
td, th{
width:20px;
/*border: 1px solid white;*/
}
tbody tr {
position: relative;
border: 1px solid white;
}
tbody tr.selected {
background-color: #eaeaf8;
}
tbody tr:hover {
background-color: #e1e1ee;
}
tbody td{
height:20px;
}
tbody td.active{
background-color: #b9b9b9;
}
thead th {
/*overflow: display;*/
position: relative;
height: 80px;
}
.terminal-cell {
width: 5px;
}
thead th span {
transform-origin: 0 50%;
transform: rotate(-40deg);
white-space: nowrap;
position: absolute;
bottom: 0;
left: 50%;
font-weight: normal;
font-size: 12px;
}
thead, tbody {
display: block;
}
tbody {
height: 100px;
overflow-y: auto;
/*display: block;*/
}
#tcontainer table{
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="tcontainer">
<table>
<thead>
<tr>
<th class="terminal-cell"></th>
<th><span>Loooonglabellalala</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Anooootherlongone</span></th>
<th><span>Final one. Maybe not so long .. aah sh*</span></th>
<th class="terminal-cell"></th>
</tr>
</thead>
<tbody>
<tr><td class="terminal-cell"></td><td class="active"></td><td class="active"></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="active"></td><td></td><td></td><td></td><td class="active"></td><td class="terminal-cell"></td></tr>
<tr class="selected"><td class="terminal-cell"></td><td class="active"></td><td
class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="active"></td><td class="active"></td><td></td><td class="active"></td><td></td><td class="terminal-cell"></td></tr>
<tr><td class="terminal-cell"></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="terminal-cell"></td></tr>
<tr><td class="terminal-cell"></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="terminal-cell"></td></tr>
<tr><td class="terminal-cell"></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="active"></td><td></td><td class="terminal-cell"></td></tr>
<tr><td class="terminal-cell"></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="terminal-cell"></td></tr>
<tr><td class="terminal-cell"></td><td class="active"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="terminal-cell"></td></tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment