Skip to content

Instantly share code, notes, and snippets.

@mapsam

mapsam/sticky-columns.html

Created September 11, 2015 00:09
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 mapsam/040bd981b26c9fb74bc4 to your computer and use it in GitHub Desktop.
Save mapsam/040bd981b26c9fb74bc4 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky column hack for table elements
Raw
sticky-columns.html
<style>
.cf:before,
.cf:after {
content:" ";
display:table;
}
.cf:after {
clear:both;
}
.cf {
*zoom:1;
}
body {
margin: 0;
padding: 0;
position: relative;
font-family: "Helvetica Neue", arial, sans-serif;
}
.info {
background-color: #f6f6f6;
overflow: hidden;
margin: 1em;
border: 2px solid #333;
position: relative;
}
table {
border-collapse: collapse;
}
td,th {
height: 50px;
vertical-align: middle;
border: 1px solid #fff;
border-collapse: collapse;
}
.sticky-wrapper {
position: relative; /* required for box shadow layer and borders of table */
box-shadow: 0 0 4px 2px #c0c0c0;
background: white;
z-index: 10;
}
.sticky-wrapper-left {
float: left;
width: 200px;
}
.sticky-wrapper-left td,
.sticky-wrapper-left th {
width: 200px;
}
.sticky-wrapper-right {
float: right;
width: 50px;
}
.sticky-wrapper-right td,
.sticky-wrapper-right th {
width: 50px;
text-align: center;
color: red;
}
.slider-wrapper {
/*display: block;*/
position: absolute;
left: 200px;
right: 50px;
overflow-x: scroll;
}
.slider-wrapper td,
.slider-wrapper th {
min-width: 100px;
text-align: center;
}
</style>
<div class="info cf">
<div class="sticky-wrapper sticky-wrapper-left">
<table class="sticky">
<tr>
<th class="tg-031e">STICKY</th>
</tr>
<tr>
<td class="tg-031e">alex soble</td>
</tr>
<tr>
<td class="tg-031e">this is a pretty long name</td>
</tr>
<tr>
<td class="tg-031e">sam matthews</td>
</tr>
</table>
</div>
<div class="slider-wrapper">
<table class="slider">
<tr>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
<th class="">flaka</th>
</tr>
<tr>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
</tr>
<tr>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
</tr>
<tr>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
<td class="">flaka</td>
</tr>
</table>
</div>
<div class="sticky-wrapper sticky-wrapper-right">
<table class="sticky">
<tr>
<th class="tg-031e">HI</th>
</tr>
<tr>
<td class="tg-031e">x</td>
</tr>
<tr>
<td class="tg-031e">x</td>
</tr>
<tr>
<td class="tg-031e">x</td>
</tr>
</table>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment