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