Skip to content

Instantly share code, notes, and snippets.

@eugenserbanescu

eugenserbanescu/sticky-table.html

Last active November 24, 2018 13:51
Show Gist options
  • Save eugenserbanescu/0d59bba34aa0e1d14db7fdb8b86894bc to your computer and use it in GitHub Desktop.
Save eugenserbanescu/0d59bba34aa0e1d14db7fdb8b86894bc to your computer and use it in GitHub Desktop.
Download ZIP
A sticky table html & css. Needed for reasons - works in Edge it seems
Raw
sticky-table.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
.results-wrapper {
height: 200px;
width: 300px;
}
.results-table {
display: block;
height: 200px;
overflow-x: scroll;
}
.results-head-cell {
background: white;
border-bottom: 1px solid #999999;
max-width: 300px;
min-width: 100px;
position: sticky;
text-align: left;
top: 0;
}
.results-cell {
max-width: 300px;
min-width: 100px;
}
.results-row {
background: #ffffff;
}
.results-row:nth-child(2n) {
background: #dddddd;
}
</style>
</head>
<body>
<div class="results-wrapper">
<table class="results-table" cellspacing="0">
<thead class="results-head">
<tr class="results-head-row">
<th class="results-head-cell">Cell 1</th>
<th class="results-head-cell">Cell 2</th>
<th class="results-head-cell">Cell 3</th>
<th class="results-head-cell">Cell 4</th>
<th class="results-head-cell">Cell 5</th>
<th class="results-head-cell">Cell 6</th>
</tr>
</thead>
<tbody class="results">
<tr class="results-row">
<td class="results-cell">Cell data data datadata</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata </td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
</tr>
<tr class="results-row">
<td class="results-cell">Cell data data datadata</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata </td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
</tr>
<tr class="results-row">
<td class="results-cell">Cell data data datadata</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata </td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
</tr>
<tr class="results-row">
<td class="results-cell">Cell data data datadata</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata </td>
<td class="results-cell">Cell data data datadata some of them have more than others</td>
<td class="results-cell">Cell data data datadata some of them have more than others</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