fixed header simple responsive table

This helps you how to create fixed header simple responsive table

by techtricks

HTML

<table id="fixed_header_table">
  <thead>
   <tr>
  <th>head</th>
  <th>head</th>
  <th>head</th>
   </tr>
  </thead>
  <tbody>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  </tbody>
</table>

CSS

#fixed_header_table {
  border-collapse: collapse;
  width: 100%;
}

#fixed_header_table td, #fixed_header_table th {
  text-align: left;
  padding: 8px;
}

#fixed_header_table td{
  border: 1px solid gray;
}

#fixed_header_table tbody tr:nth-child(odd) {
  background-color: #dddddd;
}
#fixed_header_table tbody, #fixed_header_table thead {
    display:block;
    overflow-y: auto;
 padding: 1px;
}
#fixed_header_table tbody{
    height:250px;
}
#fixed_header_table thead tr, #fixed_header_table tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

#fixed_header_table thead {
    border: 1px solid gray;
    background: #1b90bb;
 color: #FFF;
}