Make first column fixed and rest scrollable in a table

Question

In my table I want to freeze the first column and make other columns scrollable if the td overflows.

I tried here in jsfiddle but it's not working as expected.

there can be 100 rows.

I need first column is fixed and the part that has other columns is scrollable but individual td will remain fixed – thanks in advance

You may want to have a look at this question http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Hans Hohenfeld, Aug 03 '12 at 06:32
I need first column is fixed and the part that has other td's is scrollable but individual td will remain fixed — maaz, Aug 03 '12 at 06:43

Split Your Infinity · Accepted Answer · 2012-08-03T13:51:47.763

Although not perfect and depending on your use case and how you generate your HTML you can do something like this.

HTML

<table id="main">
    <tr>
        <td class="first"> what are the possible values?</td>
        <td rowspan="2">
            <div class="rest">
            <table>
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                </table>
            </div>
        </td>
    </tr>
    <tr class="first_column">
        <td class="first"> what are the possible values?</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
}
table#main {
    border-top: 1px solid #DFDFDF;
    margin-bottom: 1em;
    width:400px;
    display: block;
}
table#main .first {
    width:200px;
    white-space: nowrap;
}
table#main .rest {
    overflow: scroll;
    background: silver;
    width:200px;
}
table td.first, table .rest td {
    line-height: 1.5em;
    padding: 0.5em 0.6em;
    text-align: left;
    vertical-align: middle;
    text-align: left;
}

PS I only tested this on Safari 6 and Firefox 12, 13 & 14 on OSX

Looks interesting.. but i need in different way.. there can be 100 rows... only the first column of 100 row should be freezed. rest part (which has remaining columns) should be scrollable... — maaz, Aug 03 '12 at 09:13
@Maaz My example does that (again only tested in Safari 6, so you may need to tweak it)? The left/first column is fixed the rest can be scrolled left and right. Is it not working for you? — Split Your Infinity, Aug 03 '12 at 09:26
@Maaz Updated the JSFiddle (http://jsfiddle.net/ZswNc/19/) How do you generate your HTML btw? You can generate a table like this on the server of change a regular table from the server into this suggested structure on the client using JavaScript. — Split Your Infinity, Aug 03 '12 at 09:48
@Maaz Happy with my answer? Would you like to approve my answer? — Split Your Infinity, Aug 20 '12 at 13:04
I realise this entry is pretty old, but I was looking for a solution to this and came across. My contribution is just to add some jQuery to change the height of the first column. The above won't work if you have dynamic content which changes the height of the rows. See [http://jsfiddle.net/ZswNc/131/](http://jsfiddle.net/ZswNc/131/). — Brad Mitchell, Apr 13 '14 at 11:23

Make first column fixed and rest scrollable in a table

1 Answers1