fixed header and column

by techtricks

HTML

<div id="fixed_header_column">
<table>
<thead>
<tr>
  <th></th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
</tr>
</thead>
<tbody>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 ...

CSS

#fixed_header_column{
  position: relative;
  max-width: 100%;
  height: 300px;
  overflow: scroll;
  word-break:normal;
}

#fixed_header_column table {
  border-collapse: collapse;
}

#fixed_header_column td, #fixed_header_column th {
  padding: 5px;
}

#fixed_header_column thead th {
  position: sticky;
  top: 0px;
  background: #1b90bb;
  color: #FFF;
}

#fixed_header_column thead th:first-child {
  left: 0px;
  z-index: 1;
}

#fixed_header_column tbody th {
  position: sticky;
  left: 0px;
  background: #1b90bb;
  border-right: 1px solid gray;
  color: #FFF;
}
#fixed_header_column tbody tr:nth-child(odd) {
  background-color: #dddddd;
}