Vertical header in dataTable

DataTables is a powerful Javascript library for adding interaction features to HTML tables and it has only one library dependency (other software upon which it relies in order to work) - jQuery. Being a jQuery plug-in, DataTables makes use of many of the excellent features that jQuery provides, and hooks into the jQuery plug-in system, in the same way as all other jQuery plug-ins.

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody). An optional footer (tfoot) can also be used.

 <table id="table_id" class="display">
      <thead>
          <tr>
              <th>Column 1</th>
              <th>Column 2</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Row 1 Data 1</td>
              <td>Row 1 Data 2</td>
          </tr>
          <tr>
              <td>Row 2 Data 1</td>
              <td>Row 2 Data 2</td>
          </tr>
      </tbody>
  </table>

Initialising DataTables

$(document).ready(function() {
        $('#table_id').DataTable();
    } );

I spend most of my time showing different statistical data in different forms, tables, graphs, etc. I use DataTable almost every day and I can say it's great. One day I had a very big table and the standard layout didn't allow me to achieve what I wanted. What I needed was a vertical layout of the table header. Then I started searching the documentation and realized that DataTable didn't support something like that. So I decided to write a CSS with which I would get it and keep all the functionalities of DataTable. This is still not as flexible as I'd like, but it can serve all those who have encountered such a problem.

CSS

.dataTable {
  display: block;
  width: 100%;
}
.dataTable thead {
  display: block;
  position: relative;
}
.dataTable thead tr {
  display: flex;
}
.dataTable thead th {
  flex-grow: 1;
  position: absolute;
  top: 100%;
  z-index: 9;
  width: 140px !important;
  left: 0;
  height: 80px;
  box-sizing: border-box;
  color: #fff;
  border: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: #65696b;
}
.dataTable thead th:nth-child(2) {
  top: calc(100% + 80px * 1);
}
.dataTable thead th:nth-child(3) {
  top: calc(100% + 80px * 2);
}
.dataTable thead th:nth-child(4) {
  top: calc(100% + 80px * 3);
}
.dataTable thead th:nth-child(5) {
  top: calc(100% + 80px * 4);
}
.dataTable thead th:nth-child(6) {
  top: calc(100% + 80px * 5);
}
.dataTable thead th:nth-child(7) {
  top: calc(100% + 80px * 6);
}
.dataTable thead th:nth-child(8) {
  top: calc(100% + 80px * 7);
}
.dataTable thead th:nth-child(9) {
  top: calc(100% + 80px * 8);
}
.dataTable thead th:nth-child(10) {
  top: calc(100% + 80px * 9);
}
.dataTable thead th:nth-child(11) {
  top: calc(100% + 80px * 10);
}

.dataTable tbody {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding-left: 140px;
  min-height: calc(80px * 10 + 18px);
}
.dataTable tbody tr {
  display: block;
  box-sizing: border-box;
}
.dataTable tbody td {
  display: block;
  height: 80px;
  width: 100px;
  position: relative;
  box-sizing: border-box;
}

.dataTable tbody td:not(:last-child)::before {
  border-bottom: 1px solid #f2e7e7f5;
}

HTML

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Country</th>
                <th>Town</th>
                <th>School</th>
                 <th>Degree</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
             <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
             <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>


            </tbody>
            </table>

Final output

Thank you all.