Handsontable example

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.11.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.11.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

.handsontable thead TR:nth-child(1) {
      font-size: 1.5em;
      font-weight: bold;
  }
   .handsontable thead TR:nth-child(2) th {
      text-align: right;
  }

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var example1 = document.getElementById('example1');
  
  var hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(5,8),
    colHeaders: true,
    rowHeaders: true,
    colWidths: 70,
    nestedHeaders: [
      [{label: 'XS', colspan: 8}],
      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U'] 
    ]
  });
  
  
  
});