CSS Table Column Freeze - html

Question

Could someone help with this
http://jsfiddle.net/smilepak/8qRQB/4/
<div>
<table>
<tr>
<td class="headcol">Fiddle Options</td>
<td class="long">Created and maintained by Piotr and Oskar. Hosted by DigitalOcean. Special thanks to MooTools community.</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">Legal, Credits and Links</td>
<td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">Ajax Requests</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
table {
border-collapse:separate;
border-top: 1px solid grey;
}
td {
margin:0;
border:1px solid grey;
border-top-width:0px;
}
div {
width: 600px;
overflow-x:scroll;
margin-left:10em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:10em;
left:0;
top:auto;
border-right: 1px none black;
border-top-width:1px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
In firefox, the row border doesn't seem to line up. I want a table where the first column is frozen while the rest is scrollable. All rows are linked up to a single scroll bar so i can use in a loop via Razor view in MVC.
Thanks,

Answer 1

JSBIN: http://jsbin.com/IwisANaX/3/edit
CSS
...
.freeze td:nth-child(1),
.freeze th:nth-child(1) {
background: #ddd;
position: absolute;
width: 20px;
left: 0;
}
.freeze .bottomScroll {
overflow-x: hidden;
margin-left: 20px;
}
...
JS
var ns = $('.newScroll', table),
bs = $('.bottomScroll', table);
ns.scroll(function(){bs.scrollLeft(ns.scrollLeft());});

Answer 2

try using
.headcol {max-width: 10em}
also note that using
.headcol {position: absolute}
makes the cell not to align relatively to the document; that´s why it looks like that

Answer 3

I used this combination of JavaScript and CSS to solve the sticky column issue.
https://jsfiddle.net/5poxyje4/
JS (Commented Section has boostrap compatible code)
var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();
$fixedColumn.find('tr').each(function (i, elem) {
if(elem.rowSpan = "1"){
$(this).height($table.find('tr:eq(' + i + ')').height());
}
else{
for (x = i; x <= parseInt(elem.rowSpan); x++) {
var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();
$(this).height(tempHeight);
}
}
});
//Comments for if you are using bootrap tables
//var $table = $('.table');
//var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();
//$fixedColumn.find('tr').each(function (i, elem) {
// $fixedColumn.find('tr:eq(' + i + ') > th:first-child,tr:eq(' + i + ') > td:first-child').each(function (c, cell) {
// if (cell.rowSpan == "1") {
// $(this).height($table.find('tr:eq(' + i + '),tr:not(.excludeRow)').height());
// }
// else {
// for (x = 1; x < parseInt(cell.rowSpan) ; x++) {
// var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();
// $(this).height(tempHeight);
// }
// }
// $(this).width($table.find('.stickyColumn').first().width());
// });
//});
CSS(Commented section has bootstrap compatible code in my Site.css)
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
/* used z-index with bootstrap */
/*z-index: 9999;*/
}
/*This media query conflicted with my bootstrap container. I did not use it*/
#media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
/*Commented Section for if you are using bootstrap*/
/*.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
background-color:#ffffff;
}*/
This accounts for if a th or a td has a rowspan greater than 1 as well.