HTML Table Header with Fixed Position and scroll able table data elements
<p>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</p>

<p>And I want this to be done <strong>without manually fixing the width of table header</strong>, 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.</p>

<p>Can someone help me in approaching this, by using the same CSS class name </p>

<p>Below is the Demo of my table.</p>

<p><strong><em><a href="https://jsfiddle.net/t6o5hxkw/" rel="nofollow noreferrer">Demo Of the Table</a></em></strong></p>

<p>CSS I am using for the above table</p>

<pre><code>.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;
}
</code></pre>