1

I'm working on a project where the client wants sticky headers/columns on his table. But I can't use a real script for this cause this project have already to many objects in page and I'm losing speed and stuffs like that.

What I succeed so far is to creat a hybrid of css with javascript in which I scroll left/top my elements after the table scroll.

Working well even in IE 9, to not cover Opera, Chrome, Safari, Maxthon; but sadly this doesn't work in FF so I need a bit of help to solve this.

I'll post here my fiddle result page: http://jsfiddle.net/kordosoft/7v4RZ/21/embedded/result/ Working copy of fiddle:http://jsfiddle.net/kordosoft/7v4RZ/21/

If you will open it in different browsers this will 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 &amp; 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>
Improve this question
2
  • Have you thought about simply embedding a google spreadsheet? This would also give all the benefits of a full spreadsheet application. Commented May 21, 2014 at 3:59
  • @Tims - I have multiple reasons to NOT use google spreadsheets - UI, formulas, speed&performance, number of data, how the data are processed, the output filtering... so no way... maybe it will work for 1k linked cells...but on 400k cells linked no way, I don't want my client browser to crash when he tries to input data into the app Commented May 21, 2014 at 9:06

2 Answers 2

Reset to default
2
+50

Since, the problem is only in firefox, I guess we can cheat a little bit and use CSS transforms with the prefix -moz and other browsers will just ignore it. So something 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 only one css property, row will overwrite column above.
//so the code below selects the case where it has both translateX and 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)");

Example

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I would put the headers outside the table, maybe in its own table or using divs. Next put the table inside a div with overflow: auto. Best of all there's no Javascript required so performance should be far better.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.