HTML Table Header with Fixed Position and scroll able table data elements

Main intention of this question is to make table header fixed and when we scroll vertically only elements should scrolled and table header should be on the same position

And I want this to be done without manually fixing the width of table header, As my column header width is dependent on the td elements .I see some questions where solution found using manually fixing the width of the table header.

Can someone help me in approaching this, by using the same CSS class name

Below is the Demo of my table.

Demo Of the Table

CSS I am using for the above table

.wrapper {

overflow : auto;
width: 1350px;
max-height : 250px;
white-space: nowrap;
padding-bottom : 10px;
padding-top : 10px;
}
.professional .title {
    padding-top: 10px;
    backgrounionad: #2980b9;
}
td {
white-space: nowrap;
border-style: solid;
padding: 8px;
border-right-color: #ff0000;
}

th {
position:auto;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width : auto;
height : word-spacing;
white-space: nowrap;

}

.table {

width: auto;
max-width: auto;
margin-bottom: 20px;
}

.tableheader {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1.3rem;
border-radius: 5px;
text-transform: capitalize;
position: relative;

padding: 10px 25px 10px 25px;
}

Finally I ended up by fixing the table width manually, But here I made below things to make it work as I wanted.

Initially I manually found the width of maximum cell content. Without Touching the CSS I overridden the width in HTML itself as below.

Since in my real application I am using ng-repeat I dont need to manually add these in each row.

Any Improvement/Suggestions always accepted :)

style="width : 183px !important;"

Working Demo

Note : Please view the demo in enlarged window as below

My Application HTML Using Ng-Repeat

<div>
            <!--, From the local table,-->
            <table class="professional">
                <tbody>
                    <thead>
                        <tr>

                            <th class="tableheader" style="width : 183px !important;">Message ID</th>
                            <th class="tableheader" style="width : 353px !important;">Operation</th>
                            <th class="tableheader" style="width : 88px !important;">Status</th>
                            <th class="tableheader" style="width : 153px !important;">Account Number</th>
                            <th class="tableheader" style="width : 130px !important;">Send Time</th>
                            <th class="tableheader" style="width : 130px !important;">Receive Time</th>
                            <th class="tableheader" style="width : 113px !important;">Send Data</th>
                            <th class="tableheader" style="width : 128px !important;">Receive Data</th>

                        </tr>
                    </thead>
                </tbody>
            </table>
        </div>
        <div class="wrapper">
            <table class="professional">
                <tbody>

                    <tr class="features" ng-repeat="list in mesaages">
                        <td style="width : 183px !important;">{{list._id.$id}}</td>
                        <td style="width : 353px !important;">{{list.OPERATION}}</td>
                        <td style="width : 88px !important;">{{list.STATUS}}</td>
                        <td style="width : 153px !important;">{{list.ACCOUNTNUMBER}}</td>
                        <td style="width : 130px !important;">{{list.SENDTIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td  style="width : 130px !important;">{{list.RECEIVETIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td ng-click="showText(list.REQUEST,$index)" style="width : 113px !important;"><a style="cursor: pointer;">Request</a></td>
                        <td ng-click="showText(list.RESPONSE,$index)" style="width : 128px !important;"><a style="cursor: pointer;">Response</a></td>
                    </tr>

                </tbody>

            </table>
        </div>