Lock a column based on id using jquery
<p>Is it possible to lock a column based on it's id using jquery? I've seen different solutions, like header locking, and some can also lock the columns indexing from left. What I am trying to do is when I click the lock button, it will lock the column and won't be moved when scrolled horizontally.</p>

<p>For example I click the lock on header 1, scrolled horizontally, then clicked lock on header 3. Header 1 and Header 3 should be adjacent to each other and shouldn't move when scrolled horizontally.</p>

<p><a href="http://imm.io/U1MR" rel="nofollow">Click here to view image</a></p>

<p>Below is my code:</p>

<pre><code>&lt;div style="float: left; width: 75%; overflow-x: scroll;"&gt;
&lt;table style="width: 200% !important;"&gt;
    &lt;tr&gt;
        &lt;td id="lid_1" colspan="3"&gt;
            &lt;div style="margin-top: 3px;"&gt;
                January 24, 2013
                &lt;button id="lid_1"&gt;Lock&lt;/button&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        &lt;td id="lid_2" colspan="3"&gt;
            &lt;div style="margin-top: 3px;"&gt;
                January 25, 2013
                &lt;button id="lid_2"&gt;Lock&lt;/button&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        &lt;td id="lid_3" colspan="3"&gt;
            &lt;div style="margin-top: 3px;"&gt;
                January 26, 2013
                &lt;button id="lid_3"&gt;Lock&lt;/button&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        &lt;td id="lid_4" colspan="3"&gt;
            &lt;div style="margin-top: 3px;"&gt;
                January 27, 2013
                &lt;button id="lid_4"&gt;Lock&lt;/button&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        &lt;td id="lid_5" colspan="3"&gt;
            &lt;div style="margin-top: 3px;"&gt;
                January 27, 2013
                &lt;button id="lid_5"&gt;Lock&lt;/button&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        &lt;td id="lid_6" colspan="3"&gt;
            &lt;div style="margin-top: 3px;"&gt;
                January 28, 2013
                &lt;button id="lid_6"&gt;Lock&lt;/button&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td id="lid_1"&gt;Header 1&lt;/td&gt;
        &lt;td id="lid_1"&gt;Header 2&lt;/td&gt;
        &lt;td id="lid_1"&gt;Header 3&lt;/td&gt;
        &lt;td id="lid_2"&gt;Header 1&lt;/td&gt;
        &lt;td id="lid_2"&gt;Header 2&lt;/td&gt;
        &lt;td id="lid_2"&gt;Header 3&lt;/td&gt;
        &lt;td id="lid_3"&gt;Header 1&lt;/td&gt;
        &lt;td id="lid_3"&gt;Header 2&lt;/td&gt;
        &lt;td id="lid_3"&gt;Header 3&lt;/td&gt;
        &lt;td id="lid_4"&gt;Header 1&lt;/td&gt;
        &lt;td id="lid_4"&gt;Header 2&lt;/td&gt;
        &lt;td id="lid_4"&gt;Header 3&lt;/td&gt;
        &lt;td id="lid_5"&gt;Header 1&lt;/td&gt;
        &lt;td id="lid_5"&gt;Header 2&lt;/td&gt;
        &lt;td id="lid_5"&gt;Header 3&lt;/td&gt;
        &lt;td id="lid_6"&gt;Header 1&lt;/td&gt;
        &lt;td id="lid_6"&gt;Header 2&lt;/td&gt;
        &lt;td id="lid_6"&gt;Header 3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td id="lid_1" colspan="3"&gt;
            &lt;table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;"&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                &lt;/tr&gt;
                &lt;br/&gt;
            &lt;/table&gt;
        &lt;/td&gt;
        &lt;td id="lid_2" colspan="3"&gt;
            &lt;table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;"&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                &lt;/tr&gt;
                &lt;br/&gt;
            &lt;/table&gt;
        &lt;/td&gt;
        &lt;td id="lid_3" colspan="3"&gt;
            &lt;table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;"&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                &lt;/tr&gt;
                &lt;br/&gt;
            &lt;/table&gt;
        &lt;/td&gt;
        &lt;td id="lid_4" colspan="3"&gt;
            &lt;table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;"&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                &lt;/tr&gt;
                &lt;br/&gt;
            &lt;/table&gt;
        &lt;/td&gt;
        &lt;td id="lid_5" colspan="3"&gt;
            &lt;table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;"&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                &lt;/tr&gt;
                &lt;br/&gt;
            &lt;/table&gt;
        &lt;/td&gt;
        &lt;td id="lid_6" colspan="3"&gt;
            &lt;table style="width:100.1%; margin-top: -17px !important; margin-left: -1px !important;"&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                &lt;/tr&gt;
                &lt;br/&gt;
            &lt;/table&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p></p>
