how do I create an HTML table with fixed/frozen left column and scrollable body?

Tags: html,css,html-table

Problem :

How do I create an HTML table with fixed/frozen left column and scrollable body?

I need a simple solution. I know it's similar to some other questions, like:

But I need just a single left column to be frozen and I would prefer a simple and script-less solution.

Solution :

If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...


Relevant HTML & CSS:

<!DOCTYPE html>
<style type="text/css">
    body { font:16px Calibri;}
    table { border-collapse:separate; border-top: 3px solid grey; }
    td, th {
        border:3px solid grey;
    div {
        width: 600px;
    .headcol {
        border-right: 0px none black;
        border-top-width:3px; /*only relevant for first row*/
        margin-top:-3px; /*compensate for top border*/
    .headcol:before {content: 'Row ';}
    .long { background:yellow; letter-spacing:1em; }
    <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">7</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">8</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><th class="headcol">9</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>

    CSS Howto..

    How to disable IE11 WebBrowser control scaling

    How to make layout like notes in Google Keep using CSS?

    How to get the click position on a page when a css zoom is involved

    How to change the text my button displays?

    How to make carousel have a max width, and load without resize

    Materialize CSS Showing errors on form fields

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    How to position footer correctly with css?

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    How find all elements with a specific css property in a div and add a class to div

    How can I solve this styling issues?

    How to perfectly center a “plus” sign in a circle using CSS

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    How do you put two divs next to each other so they fill up the available space

    How do I iterate through array and set classes individually?

    How to create donut chart in pure css & svg

    How to make this CSS compatible with IE browsers? [closed]

    How to fade background images (from CSS) in and out with jquery

    How do I set two values for IE's `filter` property?

    How to copy this semi-static menu?

    How to add colour classes to this css

    PostCSS: How to conditionally add a new rule based on declaration in current rule?

    How to inherit css from grandparent tag? [duplicate]

    How to modify twitter bootstrap “.icon-bar” colors

    How to set the minimum height of a
    box in Internet Explorer 8?

    How do you Add an image to the left side of a div

    How do I make a dedicated row for javascript alerts?

    How to change CSS attribute value based on querystring using jQuery

    how to fix the difference in line thickness for a collapsable element

    how to make the text in a div to not overflow its width