CODEWITHSUNDEEP
angular1.6
sanhita ghosh
sanhita ghosh

Reputation: 1

AngularJS 1.6 Table with fixed header and 3 columns

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

Upvotes: 0

Views: 703

Answers (1)

Arvin
Arvin

Reputation: 594

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>

Upvotes: 1

Related Questions