Scrollable table with fixed column fixed with equal size

[ifouranandkumar]

.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; /*HOW TO HAVE THIS in Eqaul SIZE??*/
            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; /*HOW TO HAVE THIS in Eqaul SIZE??*/
        }

/////////////////////////////////////////////////////////

<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>
                        <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>
                        <td>9876543210</td>
                        <td>Google Office</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> 

Post edited by TechnoBear to remove fake signature

[Gandalf]

Is there a question here?

[PaulOB]

The easiest and best way to do scrollable tables with fixed first column or fixed headers is to use position sticky.

All other methods are problematic or require scripting.