Wednesday, 22 February 2017

HTML - Table - freeze multiple columns in table


Watch this example on youtube;




this code will produce simple table with first 2 column frozen while scrolling

<!DOCTYPE html>
<html>

<style type="text/css">
    th, td{
        border:3px solid black;
    }
    div{
        width: 20px;
        overflow-x: scroll;
        margin-left: 15em;
    }
    .col1{
        position: absolute;
        width: 10em;
        left: 0em;
        top: auto;
    }
    .col2{
        position: absolute;
        width: 5em;
        left: 10em;
        top: auto;
    }
</style>
<body>
    <div>
    <table>
        <tr>
            <th class="col1">aaaa</th><th class="col2">bbb</th><td>ccccc</td><td>ddddd</td></tr>
            <tr><th class="col1">aaaa</th><th class="col2">bbb</th><td>ccccc</td><td>ddddd</td></tr>
            <tr><th class="col1">aaaa</th><th class="col2">bbb</th><td>ccccc</td><td>ddddd</td></tr>
            <tr><th class="col1">aaaa</th><th class="col2">bbb</th><td>ccccc</td><td>ddddd</td></tr>
            <tr><th class="col1">aaaa</th><th class="col2">bbb</th><td>ccccc</td><td>ddddd</td></tr>
            <tr><th class="col1">aaaa</th><th class="col2">bbb</th><td>ccccc</td><td>ddddd</td></tr>
       
    </table>
    </div>
</body>
</html>
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)