Frozen columns through pure CSS

Question

Here's the example through which I can make my first column frozen through pure CSS.

HTML:

<div><table>
    <tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.s</td>
            <td class="long">Column 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            <td class="long">Column 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            <td class="long">Column 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            <td class="long">Column 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr>
        <tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr>
        <tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr>
</table></div>

CSS:

body { font:normal 14px Arial; padding:10px}
table { border-collapse:separate; border-top: 1px solid grey; }
td {
    margin:0;
    border:1px solid grey; 
    border-top-width:0px; 
    border-right-width:0px; 
    white-space:nowrap;
}
div { 
    width: 600px; 
    height: 200px;
    overflow-x:auto;  
    overflow-y:visible;
    padding-bottom:1px;
    margin-left:50px;
}
.headcol {
    position:absolute; 
    background: white;
    border-top-width:1px; /*only relevant for first row*/
    border-right-width:1px; 
    margin-top:-1px; /*compensate for top border*/
    }
td { padding: 5px; }

The issue is I wanted to hide the overflowing columns as per the container height and columns should move as per the vertical scrolling. It should be only horizontally frozen. Is this possible through pure CSS? Here's the js fiddle for more clarity: http://jsfiddle.net/YMvk9/5410/

Appreciate your response...

How about http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed/14486644#14486644 — skube, Nov 18 '14 at 20:20
The only difference is I have fix height and overflow-x: auto, and fixed columns are not vertically scrolling as per the rest of the columns... — SatAj, Nov 18 '14 at 20:57
I'm not sure what you're asking exactly? Do you mean to hide the first column? — skube, Nov 19 '14 at 15:51
I am trying to achieve following behavior, but through pure css: http://plnkr.co/edit/UfFnsZ?p=preview (Please check the first column, it freezes only on horizontal scrolling) — SatAj, Nov 20 '14 at 19:19

Frozen columns through pure CSS

0 Answers0