AngularJS 1.6 Table with fixed header and 3 columns

Question

I am using Angular 1.6. I have a dynamic table for which I have to freeze the header and left 3 columns. Please Help if there is any directive to do the same. I have tried all options available in net using CSS and jquery plugin but in vein. Please help

Did you get this - embed.plnkr.co/plunk/FpOSL6 ?

Liping Huang
– Liping Huang

2018-01-29 06:05:36 +00:00
Commented Jan 29, 2018 at 6:05 — Liping Huang
– Liping Huang, Commented Jan 29, 2018 at 6:05

Arvin · Accepted Answer · 2018-01-29 06:50:56Z

1

div {
    width: 300px;
    overflow-x:scroll;
    margin-left:50px;
    overflow-y:visible;
    padding-bottom:1px;
}
td {
    padding: 0 40px;
    
}

table tr td:first-child{
  position:absolute;
  width:50px; 
  left:0;
}

<div>
    <table>
        <tr>
            <td></td>
            <td>Walter</td>
            <td>Mike</td>
            <td>Nancy</td>
        </tr>
        <tr>
            <td>Age</td>
            <td>30</td>
            <td>20</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>Male</td>
            <td>Female</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Company</td>
            <td>ABC</td>
            <td>BBC</td>
            <td>BFG</td>
        </tr>
    </table>
</div>

answered Jan 29, 2018 at 6:50

Arvin

6146 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS 1.6 Table with fixed header and 3 columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related