Angular 2 Tutorial

Angular 2 Tutorial Angular2

by mahendra_ahada

HTML

<!--
 * Created by Mahendra Pratap Singh Ahada
 Linkedin : https://www.linkedin.com/in/mahendra-pratap-singh-ahada-02b93290/
 StackOverFlow : https://stackoverflow.com/users/6601660/mahendra-pratap-singh-ahada
  -->
<!DOCTYPE html>
<html>
 
 <body>
       <div class="table">
        <div class="table-scroll">
            <table class="table-main">
                <thead>
                    <tr>
                        <th class="fix-col">Name</th>
                        <th>Designation</th>
                        <th>Experience</th>
                        <th>Technology</th>
                        <th>Company</th>
                        <th>Location</th>
                        <th>Contact No.</th>
                        <th>Address</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fix-col">Bob</td>
                        <td>Front End Developer</td>
                        <td>5 yrs</td>
                        <td>HTML,CSS</td>
                        <td>Google</td>
                        <td>California</td>
                        <td>9876543210</td>
                        <td>Google Office</td>
                    </tr>
                    <tr>
                        <td class="fix-col">Bob</td>
                        <td>Front End Developer</td>
                        <td>5 yrs</td>
                        <td>HTML,CSS</td>
                        <td>Google</td>
                        <td>California</td>
                        <td>9876543210</td>
                        <td>Google Office</td>
                    </tr>
                    <tr>
                        <td class="fix-col">Bob</td>
                        <td>Front End Developer</td>
                        <td>5 yrs</td>
                        <td>HTML,CSS</td>
                        <td>Google</td>
                        <td>California</td>
                    ...

CSS

.table-main {
            border: none;
            border-right: solid 1px rgb(75, 90, 102);
            border-collapse: separate;
            border-spacing: 0;
            font: normal 13px Arial, sans-serif;
        }

        .table-main thead th {
            background-color: rgb(203, 220, 233);
            border: none;
            color: #336B6B;
            padding: 10px;
            text-align: left;
            text-shadow: 1px 1px 1px #fff;
            white-space: nowrap;
        }

        .table-main tbody td {
            border-bottom: solid 1px rgb(75, 90, 102);
            color: #333;
            padding: 10px;
            text-shadow: 1px 1px 1px #fff;
            white-space: nowrap;
        }

        .table {
            position: relative;
        }

        .table-scroll {
            margin-left: 131px;
            overflow-x: scroll;
            overflow-y: visible;
            padding-bottom: 5px;
            width: 500px;
        }

        .table-main .fix-col {
            border-left: solid 1px rgb(75, 90, 102);
            border-right: solid 1px rgb(75, 90, 102);
            left: 0;
            position: absolute;
            top: auto;
            width: 110px;
        }