title: how do we fixed scroll with fix header and adjust width of headers as well as td equal?
body: <p>if I add n No. of header it will set with certain min-width and if total min-width of headers width above the 100% of table widht scroll have to provide , simultanously want td width equal to header width : </p>
  
  <p>html code is as below:
  <a href="https://jsfiddle.net/1w7vnLec/" rel="nofollow noreferrer">https://jsfiddle.net/1w7vnLec/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  table.scroll {
       width: 100%; 
       /* Optional */
      /* border-collapse: collapse; */
      border-spacing: 0;
      border: 2px solid black;
  }
  
  table.scroll tbody,
  table.scroll thead { display: block; }
  
  thead tr th { 
      height: 30px;
      line-height: 30px;
      /* text-align: left; */
  }
  
  table.scroll tbody {
      height: 100px;
      overflow-y: auto;
      overflow-x: scroll;
  }
  
  tbody { border-top: 2px solid black; }
  
  tbody td, thead th {
      /* width: 20%; */ /* Optional */
      border-right: 1px solid black;
      /* white-space: nowrap; */
  }
  
  tbody td:last-child, thead th:last-child {
      border-right: none;
  }
  
  &lt;/style&gt;
  
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table class="scroll"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Head 1&lt;/th&gt;
              &lt;th&gt;Head 2&lt;/th&gt;
              &lt;th&gt;Head 3&lt;/th&gt;
              &lt;th&gt;Head 4&lt;/th&gt;
              &lt;th&gt;Head 5&lt;/th&gt;
              &lt;th&gt;Head 6&lt;/th&gt;
              &lt;th&gt;Head 7&lt;/th&gt;
              &lt;th&gt;Head 8&lt;/th&gt;
              &lt;th&gt;Head 9&lt;/th&gt;
              &lt;th&gt;Head 10&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Content 1&lt;/td&gt;
              &lt;td&gt;Content 2&lt;/td&gt;
              &lt;td&gt;Content 3&lt;/td&gt;
              &lt;td&gt;Content 4&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Content 1&lt;/td&gt;
              &lt;td&gt;Content 1&lt;/td&gt;
              &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
              &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
              &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
              &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
              &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
              &lt;td&gt;Content 3&lt;/td&gt;
              &lt;td&gt;Content 4&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Content 1&lt;/td&gt;
              &lt;td&gt;Content 2&lt;/td&gt;
              &lt;td&gt;Content 3&lt;/td&gt;
              &lt;td&gt;Content 4&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
               &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
              &lt;td&gt;Content 5&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>how do we fixed scroll with fix header and adjust width of headers as well as td  equal ?</p>