Click here to Skip to main content
15,881,204 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have this table and I want it to be scrolled horizontal and vertical without the header or the first column is not moving. Basically I want it to be only CSS.

CSS
.tableF { border-collapse:separate; }
        .divF /*This is for the items that are scrollable. Meaning the 2nd to the last TR*/
        {
            border:1px solid;
            width: 78%;/*adjust width of movable*/
            overflow-x:scroll;
            margin-left:6em;/*fix column in right*/
            overflow-y:invisible;
            padding-bottom:1px;
        }
        .headcol/*This is only for the first TR*/
        {
            position: absolute;
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px; /*only relevant for first row*/
            margin-top:0px; /*adjust first column to other rows*/
        }


NOTE: It is suppose to be mobile-optimized.
Thank you for the help.
Posted

1 solution

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.


Refer the Link:

http://zurb.com/playground/playground/responsive-tables/index.html
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900