jquery - HTML table with fixed header/columns - css solution - not working in Firefox -
i'm working on project client wants sticky headers/columns on table. can't use real script cause project have many objects in page , i'm losing speed , stuffs that.
what succeed far creat hybrid of css javascript in scroll left/top elements after table scroll.
working in ie 9, not cover opera, chrome, safari, maxthon; sadly doesn't work in ff need bit of solve this.
i'll post here fiddle result page: http://jsfiddle.net/kordosoft/7v4rz/21/embedded/result/ working copy of fiddle:http://jsfiddle.net/kordosoft/7v4rz/21/
if open in different browsers work except ff.
sticky headers: 1st 2 rows; sticky columns: 1st 2 columns;
js:
document.getelementsbyclassname("valuation")[0].onscroll = function () { var _left = document.getelementsbyclassname("valuation")[0].scrollleft; jquery('.valuation td[column="a"],.valuation td[column="b"]').css('left', _left); var _top = document.getelementsbyclassname("valuation")[0].scrolltop; jquery('.valuation td[row="1"],.valuation td[row="3"]').css('top', _top); } css:
table { width: 100%; border-spacing: 0; border: 0; border-spacing: none; border-collapse: collapse; color: #4d4f6e; font-size: 12px; text-shadow: 0 0 1px #fff; } td { position: relative; } .valuation { display: block; overflow: scroll; max-height: 400px; width: 700px; } .donotshow{display:none;} .valuation td[column="a"], .valuation td[column="b"] { min-width: 190px!important; font-weight: bold; border-right: 1px dashed #d6dae1; } .valuation td { min-width: 75px; } .valuation td[column="a"], .valuation td[column="b"] { left:0;z-index:2; } .valuation td[row="1"], .valuation td[row="3"] { z-index:2; top:0; } .valuation td[row="1"][column="b"], .valuation td[row="3"][column="b"],.valuation td[row="1"][column="a"], .valuation td[row="3"][column="a"] { z-index:3; } .valuation tr[row="3"] { font-weight: bold; } .valuation tr[row="1"] td, .valuation tr[row="4"] td, .valuation tr[row="30"] td, .valuation tr[row="52"] td, .valuation tr[row="82"] td, .valuation tr[row="92"] td, .valuation tr[row="95"] td, .valuation tr[row="104"] td, .valuation tr[row="118"] td, .valuation tr[row="140"] td, .valuation tr[row="146"] td, .valuation tr[row="149"] td, .valuation tr[row="200"] td, .valuation tr[row="220"] td, .valuation tr[row="234"] td { font-weight: bold; border: none!important; color: #383a6a; border-bottom: 1px solid #fff!important; background: rgb(213,222,239); /* old browsers */ background: -moz-linear-gradient(top, rgba(213,222,239,1) 0%, rgba(192,196,211,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,222,239,1)), color-stop(100%,rgba(192,196,211,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, rgba(213,222,239,1) 0%,rgba(192,196,211,1) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, rgba(213,222,239,1) 0%,rgba(192,196,211,1) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, rgba(213,222,239,1) 0%,rgba(192,196,211,1) 100%); /* ie10+ */ background: linear-gradient(to bottom, rgba(213,222,239,1) 0%,rgba(192,196,211,1) 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#d5deef', endcolorstr='#c0c4d3',gradienttype=0 ); /* ie6-9 */ } .valuation tr:nth-child(2n) td { background-color: #fff; } .valuation tr:nth-child(2n+1) td { background-color: #f4f6fa; } html:
<table class="valuation"> <tbody> <tr row="1"> <td column="a" row="1" sheet="valuation">valuation for:<span class="companynamelabel">-</span> </td> <td column="b" row="1" sheet="valuation"></td> <td class="donotshow" column="c" row="1" sheet="valuation"></td> <td class="donotshow" column="d" row="1" sheet="valuation"></td> <td class="donotshow" column="e" row="1" sheet="valuation"></td> <td class="donotshow" column="f" row="1" sheet="valuation"></td> <td class="donotshow" column="g" row="1" sheet="valuation"></td> <td class="donotshow" column="h" row="1" sheet="valuation"></td> <td class="donotshow" column="i" row="1" sheet="valuation"></td> <td column="j" row="1" sheet="valuation"></td> <td column="k" row="1" sheet="valuation"></td> <td column="l" row="1" sheet="valuation"></td> <td column="m" row="1" sheet="valuation"></td> <td column="n" row="1" sheet="valuation"></td> <td column="o" row="1" sheet="valuation"></td> <td column="p" row="1" sheet="valuation"></td> <td column="q" row="1" sheet="valuation"></td> <td column="r" row="1" sheet="valuation"></td> <td column="s" row="1" sheet="valuation"></td> <td column="t" row="1" sheet="valuation"></td> <td column="u" row="1" sheet="valuation"></td> <td column="v" row="1" sheet="valuation"></td> <td class="donotshow" column="w" row="1" sheet="valuation"></td> <td class="donotshow" column="x" row="1" sheet="valuation"></td> </tr> <tr row="3"> <td column="a" row="3" sheet="valuation">years</td> <td column="b" row="3" sheet="valuation"></td> <td class="donotshow" column="c" row="3" sheet="valuation"><span class="fy-9">2005</span> </td> <td class="donotshow" column="d" row="3" sheet="valuation"><span class="fy-8">2006</span> </td> <td class="donotshow" column="e" row="3" sheet="valuation"><span class="fy-7">2007</span> </td> <td class="donotshow" column="f" row="3" sheet="valuation"><span class="fy-6">2008</span> </td> <td class="donotshow" column="g" row="3" sheet="valuation"><span class="fy-5">2009</span> </td> <td class="donotshow" column="h" row="3" sheet="valuation"><span class="fy-4">2010</span> </td> <td class="donotshow" column="i" row="3" sheet="valuation"><span class="fy-3">2011</span> </td> <td column="j" row="3" sheet="valuation"><span class="fy-2">2012</span> </td> <td column="k" row="3" sheet="valuation"><span class="fy-1">2013</span> </td> <td column="l" row="3" sheet="valuation"><span class="fy0">2014</span> </td> <td column="m" row="3" sheet="valuation"><span class="fy1">2015</span> </td> <td column="n" row="3" sheet="valuation"><span class="fy2">2016</span> </td> <td column="o" row="3" sheet="valuation"><span class="fy3">2017</span> </td> <td column="p" row="3" sheet="valuation"><span class="fy4">2018</span> </td> <td column="q" row="3" sheet="valuation"><span class="fy5">2019</span> </td> <td column="r" row="3" sheet="valuation"><span class="fy6">2020</span> </td> <td column="s" row="3" sheet="valuation"><span class="fy7">2021</span> </td> <td column="t" row="3" sheet="valuation"><span class="fy8">2022</span> </td> <td column="u" row="3" sheet="valuation"><span class="fy9">2023</span> </td> <td column="v" row="3" sheet="valuation"><span class="fy10">2024</span> </td> <td class="donotshow" column="w" row="3" sheet="valuation"><span class="fy11">2025</span> </td> <td class="donotshow" column="x" row="3" sheet="valuation"><span class="fy12">2026</span> </td> </tr> <tr row="4"> <td column="a" row="4" sheet="valuation">operating free cash flow</td> <td column="b" row="4" sheet="valuation"></td> <td class="donotshow" column="c" row="4" sheet="valuation"></td> <td class="donotshow" column="d" row="4" sheet="valuation"></td> <td class="donotshow" column="e" row="4" sheet="valuation"></td> <td class="donotshow" column="f" row="4" sheet="valuation"></td> <td class="donotshow" column="g" row="4" sheet="valuation"></td> <td class="donotshow" column="h" row="4" sheet="valuation"></td> <td class="donotshow" column="i" row="4" sheet="valuation"></td> <td column="j" row="4" sheet="valuation"></td> <td column="k" row="4" sheet="valuation"></td> <td column="l" row="4" sheet="valuation"></td> <td column="m" row="4" sheet="valuation"></td> <td column="n" row="4" sheet="valuation"></td> <td column="o" row="4" sheet="valuation"></td> <td column="p" row="4" sheet="valuation"></td> <td column="q" row="4" sheet="valuation"></td> <td column="r" row="4" sheet="valuation"></td> <td column="s" row="4" sheet="valuation"></td> <td column="t" row="4" sheet="valuation"></td> <td column="u" row="4" sheet="valuation"></td> <td column="v" row="4" sheet="valuation"></td> <td class="donotshow" column="w" row="4" sheet="valuation"></td> <td class="donotshow" column="x" row="4" sheet="valuation"></td> </tr> <tr row="6"> <td column="a" row="6" sheet="valuation"></td> <td column="b" row="6" sheet="valuation">net income</td> <td class="donotshow" column="c" row="6" sheet="valuation">0</td> <td class="donotshow" column="d" row="6" sheet="valuation">0</td> <td class="donotshow" column="e" row="6" sheet="valuation">0</td> <td class="donotshow" column="f" row="6" sheet="valuation">0</td> <td class="donotshow" column="g" row="6" sheet="valuation">0</td> <td class="donotshow" column="h" row="6" sheet="valuation">0</td> <td class="donotshow" column="i" row="6" sheet="valuation">0</td> <td column="j" row="6" sheet="valuation">0</td> <td column="k" row="6" sheet="valuation">0</td> <td column="l" row="6" sheet="valuation">0</td> <td column="m" row="6" sheet="valuation">0</td> <td column="n" row="6" sheet="valuation">0</td> <td column="o" row="6" sheet="valuation">0</td> <td column="p" row="6" sheet="valuation">n/a</td> <td column="q" row="6" sheet="valuation">n/a</td> <td column="r" row="6" sheet="valuation">n/a</td> <td column="s" row="6" sheet="valuation">n/a</td> <td column="t" row="6" sheet="valuation">n/a</td> <td column="u" row="6" sheet="valuation">n/a</td> <td column="v" row="6" sheet="valuation">n/a</td> <td class="donotshow" column="w" row="6" sheet="valuation">n/a</td> <td class="donotshow" column="x" row="6" sheet="valuation">n/a</td> </tr> <tr row="7"> <td column="a" row="7" sheet="valuation">+</td> <td column="b" row="7" sheet="valuation">net interest expense after tax</td> <td class="donotshow" column="c" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="d" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="e" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="f" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="g" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="h" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="i" row="7" sheet="valuation">n/a</td> <td column="j" row="7" sheet="valuation">n/a</td> <td column="k" row="7" sheet="valuation">n/a</td> <td column="l" row="7" sheet="valuation">n/a</td> <td column="m" row="7" sheet="valuation">n/a</td> <td column="n" row="7" sheet="valuation">n/a</td> <td column="o" row="7" sheet="valuation">n/a</td> <td column="p" row="7" sheet="valuation">n/a</td> <td column="q" row="7" sheet="valuation">n/a</td> <td column="r" row="7" sheet="valuation">n/a</td> <td column="s" row="7" sheet="valuation">n/a</td> <td column="t" row="7" sheet="valuation">n/a</td> <td column="u" row="7" sheet="valuation">n/a</td> <td column="v" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="w" row="7" sheet="valuation">n/a</td> <td class="donotshow" column="x" row="7" sheet="valuation">n/a</td> </tr> <tr row="42"> <td column="a" row="42" sheet="valuation">+</td> <td column="b" row="42" sheet="valuation">goodwill amortisation</td> <td class="donotshow" column="c" row="42" sheet="valuation">0</td> <td class="donotshow" column="d" row="42" sheet="valuation">0</td> <td class="donotshow" column="e" row="42" sheet="valuation">0</td> <td class="donotshow" column="f" row="42" sheet="valuation">0</td> <td class="donotshow" column="g" row="42" sheet="valuation">0</td> <td class="donotshow" column="h" row="42" sheet="valuation">0</td> <td class="donotshow" column="i" row="42" sheet="valuation">0</td> <td column="j" row="42" sheet="valuation">0</td> <td column="k" row="42" sheet="valuation">0</td> <td column="l" row="42" sheet="valuation">0</td> <td column="m" row="42" sheet="valuation">0</td> <td column="n" row="42" sheet="valuation">0</td> <td column="o" row="42" sheet="valuation">0</td> <td column="p" row="42" sheet="valuation">0</td> <td column="q" row="42" sheet="valuation">0</td> <td column="r" row="42" sheet="valuation">0</td> <td column="s" row="42" sheet="valuation">0</td> <td column="t" row="42" sheet="valuation">0</td> <td column="u" row="42" sheet="valuation">0</td> <td column="v" row="42" sheet="valuation">0</td> <td class="donotshow" column="w" row="42" sheet="valuation">0</td> <td class="donotshow" column="x" row="42" sheet="valuation">0</td> </tr> <tr row="43"> <td column="a" row="43" sheet="valuation">+</td> <td column="b" row="43" sheet="valuation">d provision</td> <td class="donotshow" column="c" row="43" sheet="valuation"></td> <td class="donotshow" column="d" row="43" sheet="valuation">0</td> <td class="donotshow" column="e" row="43" sheet="valuation">0</td> <td class="donotshow" column="f" row="43" sheet="valuation">0</td> <td class="donotshow" column="g" row="43" sheet="valuation">0</td> <td class="donotshow" column="h" row="43" sheet="valuation">0</td> <td class="donotshow" column="i" row="43" sheet="valuation">0</td> <td column="j" row="43" sheet="valuation">0</td> <td column="k" row="43" sheet="valuation">0</td> <td column="l" row="43" sheet="valuation">0</td> <td column="m" row="43" sheet="valuation">0</td> <td column="n" row="43" sheet="valuation">0</td> <td column="o" row="43" sheet="valuation">0</td> <td column="p" row="43" sheet="valuation">0</td> <td column="q" row="43" sheet="valuation">0</td> <td column="r" row="43" sheet="valuation">0</td> <td column="s" row="43" sheet="valuation">0</td> <td column="t" row="43" sheet="valuation">0</td> <td column="u" row="43" sheet="valuation">0</td> <td column="v" row="43" sheet="valuation">0</td> <td class="donotshow" column="w" row="43" sheet="valuation">0</td> <td class="donotshow" column="x" row="43" sheet="valuation">0</td> </tr> <tr row="44"> <td column="a" row="44" sheet="valuation">-</td> <td column="b" row="44" sheet="valuation">gains /(losses) on assets sold after tax</td> <td class="donotshow" column="c" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="d" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="e" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="f" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="g" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="h" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="i" row="44" sheet="valuation">n/a</td> <td column="j" row="44" sheet="valuation">n/a</td> <td column="k" row="44" sheet="valuation">n/a</td> <td column="l" row="44" sheet="valuation">n/a</td> <td column="m" row="44" sheet="valuation">n/a</td> <td column="n" row="44" sheet="valuation">n/a</td> <td column="o" row="44" sheet="valuation">n/a</td> <td column="p" row="44" sheet="valuation">n/a</td> <td column="q" row="44" sheet="valuation">n/a</td> <td column="r" row="44" sheet="valuation">n/a</td> <td column="s" row="44" sheet="valuation">n/a</td> <td column="t" row="44" sheet="valuation">n/a</td> <td column="u" row="44" sheet="valuation">n/a</td> <td column="v" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="w" row="44" sheet="valuation">n/a</td> <td class="donotshow" column="x" row="44" sheet="valuation">n/a</td> </tr> <tr row="45"> <td column="a" row="45" sheet="valuation">-</td> <td column="b" row="45" sheet="valuation">extraordinary items</td> <td class="donotshow" column="c" row="45" sheet="valuation">0</td> <td class="donotshow" column="d" row="45" sheet="valuation">0</td> <td class="donotshow" column="e" row="45" sheet="valuation">0</td> <td class="donotshow" column="f" row="45" sheet="valuation">0</td> <td class="donotshow" column="g" row="45" sheet="valuation">0</td> <td class="donotshow" column="h" row="45" sheet="valuation">0</td> <td class="donotshow" column="i" row="45" sheet="valuation">0</td> <td column="j" row="45" sheet="valuation">0</td> <td column="k" row="45" sheet="valuation">0</td> <td column="l" row="45" sheet="valuation">0</td> <td column="m" row="45" sheet="valuation">0</td> <td column="n" row="45" sheet="valuation">0</td> <td column="o" row="45" sheet="valuation">0</td> <td column="p" row="45" sheet="valuation">0</td> <td column="q" row="45" sheet="valuation">0</td> <td column="r" row="45" sheet="valuation">0</td> <td column="s" row="45" sheet="valuation">0</td> <td column="t" row="45" sheet="valuation">0</td> <td column="u" row="45" sheet="valuation">0</td> <td column="v" row="45" sheet="valuation">0</td> <td class="donotshow" column="w" row="45" sheet="valuation">0</td> <td class="donotshow" column="x" row="45" sheet="valuation">0</td> </tr> <tr row="46"> <td column="a" row="46" sheet="valuation">+</td> <td column="b" row="46" sheet="valuation">deferred tax</td> <td class="donotshow" column="c" row="46" sheet="valuation">0</td> <td class="donotshow" column="d" row="46" sheet="valuation">0</td> <td class="donotshow" column="e" row="46" sheet="valuation">0</td> <td class="donotshow" column="f" row="46" sheet="valuation">0</td> <td class="donotshow" column="g" row="46" sheet="valuation">0</td> <td class="donotshow" column="h" row="46" sheet="valuation">0</td> <td class="donotshow" column="i" row="46" sheet="valuation">0</td> <td column="j" row="46" sheet="valuation">0</td> <td column="k" row="46" sheet="valuation">0</td> <td column="l" row="46" sheet="valuation">0</td> <td column="m" row="46" sheet="valuation">0</td> <td column="n" row="46" sheet="valuation">0</td> <td column="o" row="46" sheet="valuation">0</td> <td column="p" row="46" sheet="valuation">0</td> <td column="q" row="46" sheet="valuation">0</td> <td column="r" row="46" sheet="valuation">0</td> <td column="s" row="46" sheet="valuation">0</td> <td column="t" row="46" sheet="valuation">0</td> <td column="u" row="46" sheet="valuation">0</td> <td column="v" row="46" sheet="valuation">0</td> <td class="donotshow" column="w" row="46" sheet="valuation">0</td> <td class="donotshow" column="x" row="46" sheet="valuation">0</td> </tr> <tr row="48"> <td column="a" row="48" sheet="valuation">+</td> <td column="b" row="48" sheet="valuation">change in capitalised r & d after tax</td> <td class="donotshow" column="c" row="48" sheet="valuation">0</td> <td class="donotshow" column="d" row="48" sheet="valuation">n/a</td> <td class="donotshow" column="e" row="48" sheet="valuation">n/a</td> <td class="donotshow" column="f" row="48" sheet="valuation">n/a</td> <td class="donotshow" column="g" row="48" sheet="valuation">n/a</td> <td class="donotshow" column="h" row="48" sheet="valuation">n/a</td> <td class="donotshow" column="i" row="48" sheet="valuation">n/a</td> <td column="j" row="48" sheet="valuation">n/a</td> <td column="k" row="48" sheet="valuation">n/a</td> <td column="l" row="48" sheet="valuation">n/a</td> <td column="m" row="48" sheet="valuation">n/a</td> <td column="n" row="48" sheet="valuation">n/a</td> <td column="o" row="48" sheet="valuation">n/a</td> <td column="p" row="48" sheet="valuation">n/a</td> <td column="q" row="48" sheet="valuation">0</td> <td column="r" row="48" sheet="valuation">0</td> <td column="s" row="48" sheet="valuation">0</td> <td column="t" row="48" sheet="valuation">0</td> <td column="u" row="48" sheet="valuation">0</td> <td column="v" row="48" sheet="valuation">0</td> <td class="donotshow" column="w" row="48" sheet="valuation">0</td> <td class="donotshow" column="x" row="48" sheet="valuation">0</td> </tr> <tr row="49"> <td column="a" row="49" sheet="valuation">=</td> <td column="b" row="49" sheet="valuation">nopat (financing)</td> <td class="donotshow" column="c" row="49" sheet="valuation">0</td> <td class="donotshow" column="d" row="49" sheet="valuation">0</td> <td class="donotshow" column="e" row="49" sheet="valuation">0</td> <td class="donotshow" column="f" row="49" sheet="valuation">0</td> <td class="donotshow" column="g" row="49" sheet="valuation">0</td> <td class="donotshow" column="h" row="49" sheet="valuation">0</td> <td class="donotshow" column="i" row="49" sheet="valuation">0</td> <td column="j" row="49" sheet="valuation">0</td> <td column="k" row="49" sheet="valuation">0</td> <td column="l" row="49" sheet="valuation">0</td> <td column="m" row="49" sheet="valuation">0</td> <td column="n" row="49" sheet="valuation">0</td> <td column="o" row="49" sheet="valuation">0</td> <td column="p" row="49" sheet="valuation">0</td> <td column="q" row="49" sheet="valuation">0</td> <td column="r" row="49" sheet="valuation">0</td> <td column="s" row="49" sheet="valuation">0</td> <td column="t" row="49" sheet="valuation">0</td> <td column="u" row="49" sheet="valuation">0</td> <td column="v" row="49" sheet="valuation">0</td> <td class="donotshow" column="w" row="49" sheet="valuation">0</td> <td class="donotshow" column="x" row="49" sheet="valuation">0</td> </tr> <tr row="52"> <td column="a" row="52" sheet="valuation">capital</td> <td column="b" row="52" sheet="valuation"></td> <td class="donotshow" column="c" row="52" sheet="valuation"></td> <td class="donotshow" column="d" row="52" sheet="valuation"></td> <td class="donotshow" column="e" row="52" sheet="valuation"></td> <td class="donotshow" column="f" row="52" sheet="valuation"></td> <td class="donotshow" column="g" row="52" sheet="valuation"></td> <td class="donotshow" column="h" row="52" sheet="valuation"></td> <td class="donotshow" column="i" row="52" sheet="valuation"></td> <td column="j" row="52" sheet="valuation"></td> <td column="k" row="52" sheet="valuation"></td> <td column="l" row="52" sheet="valuation"></td> <td column="m" row="52" sheet="valuation"></td> <td column="n" row="52" sheet="valuation"></td> <td column="o" row="52" sheet="valuation"></td> <td column="p" row="52" sheet="valuation"></td> <td column="q" row="52" sheet="valuation"></td> <td column="r" row="52" sheet="valuation"></td> <td column="s" row="52" sheet="valuation"></td> <td column="t" row="52" sheet="valuation"></td> <td column="u" row="52" sheet="valuation"></td> <td column="v" row="52" sheet="valuation"></td> <td class="donotshow" column="w" row="52" sheet="valuation"></td> <td class="donotshow" column="x" row="52" sheet="valuation"></td> </tr> </tbody> </table>
since, problem in firefox, guess can cheat little bit , use css transforms prefix -moz , other browsers ignore it. like
jquery('.valuation td[column="a"],.valuation td[column="b"]').css({ 'left': _left, '-moz-transform': "translate3d(" + _left + "px,0px,0)" }); jquery('.valuation td[row="1"],.valuation td[row="3"]').css({ 'top': _top, '-moz-transform': "translate3d(0px," + _top + "px,0)" }); //because there's only 1 css property, row overwrite column above. //so code below selects case has both translatex , translate y jquery('.valuation td[row="1"],.valuation td[row="3"]') .filter('.valuation td[column="a"],.valuation td[column="b"]') .css('-moz-transform', "translate3d(" + _left + "px," + _top + "px,0)");
Comments
Post a Comment