StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Edit 5:</strong> - Added configurable fixed Rows and Columns. - Fixed column width and height issues - Reduced usage of complex selectors</p> <p><strong>Usage:</strong></p> <pre><code> $('#cTable').cTable({ width: 1300, height: 500, fCols: 2, fRows: 2 }); </code></pre> <p><strong>DEMO:</strong> <a href="http://jsfiddle.net/rCuPf/7/embedded/result/">http://jsfiddle.net/rCuPf/7/embedded/result/</a> (updated demo)</p> <p><strong>Edit 4:</strong> Updated for colSpan on column 1. <strong>Demo:</strong> <s>http://jsfiddle.net/skram/rKjk3/26/</s></p> <p><strong>Edit 3:</strong> Did some cleanup and some fixes: <s> <a href="http://jsfiddle.net/rKjk3/22">http://jsfiddle.net/rKjk3/22</a> </s> Tested in IE9, FF and Chrome. (I don't have latest IE to test it now)</p> <p><strong>Edit 2:</strong> Fix for IE: <s>http://jsfiddle.net/rKjk3/15/embedded/result/</s> (See latest above)</p> <p><strong>Edit 1:</strong> Fix for resize window <s>http://jsfiddle.net/rKjk3/11/</s> (See latest above)</p> <ul> <li>Added window.resize event handler to set the width of the <code>rightContainer</code> so the width of actual table will be increased as you resize.</li> <li>Removed fixed width on <code>SBWrapper</code> so that it can fully utilize the available space inside the container.</li> </ul> <p>I have created 2 demo for your requirement. </p> <ol> <li><p>Sample to show how the rendered html will look like with a simple markup structure. This will allow you to look at the structure that is being rendered and how it is working :)<br /> <strong>DEMO:</strong> <a href="http://jsfiddle.net/GmJ22/7/">http://jsfiddle.net/GmJ22/7/</a></p></li> <li><p>Actual demo with the markup that you have posted. The code is just a rough version and may require some cleanup. Right now you can configure the width and height of the table. I am posting it so that you can take a look and give me some feedback. <br/> <strong>DEMO:</strong> <s>http://jsfiddle.net/rKjk3/10/embedded/result/</s> (see below fixed versions)</p></li> </ol> <p><strong>Full code:</strong></p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <HEAD> <TITLE>big scrolling table example</TITLE> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { $.fn.cTable = function(o) { this.wrap('<div class="cTContainer" />'); this.wrap('<div class="relativeContainer" />'); //Update below template as how you have it in orig table var origTableTmpl = '<table border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ></table>'; //get row 1 and clone it for creating sub tables var row1 = this.find('tr').slice(0, o.fRows).clone(); var r1c1ColSpan = 0; for (var i = 0; i < o.fCols; i++ ) { r1c1ColSpan += this[0].rows[0].cells[i].colSpan; } //create table with just r1c1 which is fixed for both scrolls var tr1c1 = $(origTableTmpl); row1.each(function () { var tdct = 0; $(this).find('td').filter( function () { tdct += this.colSpan; return tdct > r1c1ColSpan; }).remove(); }); row1.appendTo(tr1c1); tr1c1.wrap('<div class="fixedTB" />'); tr1c1.parent().prependTo(this.closest('.relativeContainer')); //create a table with just c1 var c1= this.clone().prop({'id': ''}); c1.find('tr').slice(0, o.fRows).remove(); c1.find('tr').each(function (idx) { var c = 0; $(this).find('td').filter(function () { c += this.colSpan; return c > r1c1ColSpan; }).remove(); }); var prependRow = row1.first().clone(); prependRow.find('td').empty(); c1.prepend(prependRow).wrap('<div class="leftSBWrapper" />') c1.parent().wrap('<div class="leftContainer" />'); c1.closest('.leftContainer').insertAfter('.fixedTB'); //create table with just row 1 without col 1 var r1 = $(origTableTmpl); row1 = this.find('tr').slice(0, o.fRows).clone(); row1.each(function () { var tds = $(this).find('td'), tdct = 0; tds.filter (function () { tdct += this.colSpan; return tdct <= r1c1ColSpan; }).remove(); }); row1.appendTo(r1); r1.wrap('<div class="topSBWrapper" />') r1.parent().wrap('<div class="rightContainer" />') r1.closest('.rightContainer').appendTo('.relativeContainer'); $('.relativeContainer').css({'width': 'auto', 'height': o.height}); this.wrap('<div class="SBWrapper"> /') this.parent().appendTo('.rightContainer'); this.prop({'width': o.width}); var tw = 0; //set width and height of rendered tables for (var i = 0; i < o.fCols; i++) { tw += $(this[0].rows[0].cells[i]).outerWidth(true); } tr1c1.width(tw); c1.width(tw); $('.rightContainer').css('left', tr1c1.outerWidth(true)); for (var i = 0; i < o.fRows; i++) { var tr1c1Ht = $(c1[0].rows[i]).outerHeight(true); var thisHt = $(this[0].rows[i]).outerHeight(true); var finHt = (tr1c1Ht > thisHt)?tr1c1Ht:thisHt; $(tr1c1[0].rows[i]).height(finHt); $(r1[0].rows[i]).height(finHt); } $('.leftContainer').css({'top': tr1c1.outerHeight(true), 'width': tr1c1.outerWidth(true)}); var rtw = $('.relativeContainer').width() - tw; $('.rightContainer').css({'width' : rtw, 'height': o.height, 'max-width': o.width - tw}); var trs = this.find('tr'); trs.slice(1, o.fRows).remove(); trs.slice(0, 1).find('td').empty(); trs.each(function () { var c = 0; $(this).find('td').filter(function () { c += this.colSpan; return c <= r1c1ColSpan; }).remove(); }); r1.width(this.outerWidth(true)); for (var i = 1; i < c1[0].rows.length; i++) { var c1Ht = $(c1[0].rows[i]).outerHeight(true); var thisHt = $(this[0].rows[i]).outerHeight(true); var finHt = (c1Ht > thisHt)?c1Ht:thisHt; $(c1[0].rows[i]).height(finHt); $(this[0].rows[i]).height(finHt); } $('.SBWrapper').css({'height': $('.relativeContainer').height() - $('.topSBWrapper').height()}); $('.SBWrapper').scroll(function () { var rc = $(this).closest('.relativeContainer'); var lfW = rc.find('.leftSBWrapper'); var tpW = rc.find('.topSBWrapper'); lfW.css('top', ($(this).scrollTop()*-1)); tpW.css('left', ($(this).scrollLeft()*-1)); }); $(window).resize(function () { $('.rightContainer').width(function () { return $(this).closest('.relativeContainer').outerWidth() - $(this).siblings('.leftContainer').outerWidth(); }); }); } $('#cTable').cTable({ width: 1300, height: 500, fCols: 2, fRows: 2 }); }); </script> <style> .cTContainer { overflow: hidden; padding: 2px; } .cTContainer table { table-layout: fixed; } .relativeContainer { position: relative; overflow: hidden;} .fixedTB { position: absolute; z-index: 11; } .leftContainer { position: absolute; overflow: hidden; } .rightContainer { position: absolute; overflow: hidden; } .leftSBWrapper { position: relative; z-index: 10; } .topSBWrapper { position: relative; z-index: 10; width: 100%; } .SBWrapper { width: 100%; overflow: auto; } td { background-color: white; overflow: hidden; padding: 1px; } </style> </HEAD> <BODY> <form name="MyForm" method="POST" action=""> <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center"> <tr> <td width="35%" align="left">header junk left</td> <td >- HEADER JUNK MIDDLE -</td> <td width="35%" align="right">header junk right</td> </tr> </table> <br /> <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center"> <tr> <td width="60%" align="left">header junk left</td> <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td> </tr> </table>  <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="cTable" > <tr> <td width="5%" colspan="3">fixed can be long<br>or short</td> <td width="9%" colspan="4">scroll A</td> <td width="7%" colspan="2">scroll B</td> <td width="3%">scroll C</td> <td width="9%" colspan="4">scroll D</td> <td width="7%" colspan="2">scroll E</td> <td width="3%">scroll F</td> <td width="9%" colspan="4">scroll G</td> <td width="7%" colspan="2">scroll H</td> <td width="3%">scroll I</td> <td width="9%" colspan="4">scroll J</td> <td width="7%" colspan="2">scroll K</td> <td width="3%">scroll L</td> <td width="9%" colspan="4">scroll M</td> <td width="7%" colspan="2">scroll N</td> <td width="3%">scroll O</td> </tr> <tr> <td width="5%" colspan="3">2nd fixed header</td> <td width="9%" colspan="4">scroll 2A</td> <td width="7%">scroll 2B-1</td> <td width="7%">scroll 2B-2 </td> <td width="3%">scroll 2C</td> <td width="9%" colspan="4">scroll 2D</td> <td width="7%" colspan="2">scroll 2E</td> <td width="3%">scroll 2F</td> <td width="9%" colspan="4">scroll 2G</td> <td width="7%" colspan="2">scroll 2H</td> <td width="3%">scroll 2I</td> <td width="9%" colspan="4">scroll 2J</td> <td width="7%" colspan="2">scroll 2K</td> <td width="3%">scroll 2L</td> <td width="9%" colspan="4">scroll 2M</td> <td width="7%" colspan="2">scroll 2N</td> <td width="3%">scroll 2O</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>1 1 1 1 1 A</td> <td>2 2 2 2 2 A</td> <td>3 3 3 3 3 A</td> <td>4 4 4 4 4 A</td> <td>1 B</td> <td>2 B</td> <td >1 C</td> <td>1 D</td> <td>2 D</td> <td>3 D</td> <td>4 D<br>more...</td> <td>1 E</td> <td>2 E</td> <td >1 F</td> <td>1 1 1 G</td> <td>2 2 G</td> <td>3 G</td> <td>4 4 4 4 G</td> <td>1 H</td> <td>222 H</td> <td >1 I</td> <td>1 J</td> <td>2 J</td> <td>3 J</td> <td>4 J</td> <td>1 K</td> <td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td> <td>22 M</td> <td>333 M</td> <td>4444 M</td> <td>1 N</td> <td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td colspan="2">fixed 3</td> <td>3</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td colspan="3">fixed 4</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td colspan="3">fixed 5</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> </table> <br />  <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center"> <tr> <td width="35%" align="left">footer junk left</td> <td >- FOOTER JUNK MIDDLE -</td> <td width="35%" align="right">footer junk right</td> </tr> </table> </form> </BODY> </HTML> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload