JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div style="
   overflow-x: scroll; 
   overflow-y: scroll; 
    height: 300px">
<table class="table table-bordered table-responsive" id="class-record">
            <thead>
              <tr>
                <td colspan="2" class="text-center">
                  <strong>Learner's Names</strong>
                </td>
                
                  <td colspan="23" class="text-center">
                    <strong>Written Works (20.00%)</strong>
                    
       
                    
                  </td>
                
                  <td colspan="13" class="text-center">
                    <strong>Performance Tasks (60.00%)</strong>
                    
     
                    
                  </td>
                
                  <td colspan="4" class="text-center">
                    <strong>Quarterly Assessment (20.00%)</strong>
                    
                    
                    
                  </td>
                
                <td rowspan="2">
                  <strong>
                    Initial Grade
                  </strong>
                </td>
                <td rowspan="2">
                  <strong>
                    Quarter Grade
                  </strong>
                </td>
              </tr>
              <tr>
                <td colspan="2">&nbsp;</td>
                
                  
                    
                      <td class="control-group text-center" style="padding: 0; min-width: 50px;">
                        <strong>#1</strong>
                      </td>
                    
                      <td class="control-group text-center" style="padding: 0; min-width: 50px;">
                        <strong>#2</strong>
                      </td>
                    
                      <td class="control-group text-center" style="padding: 0; min-width: 50px;">
                        <strong>#3</strong>
                      </td>
                    
           ...

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 16px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f2f2f2;
}
table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
  float: none;
  display: table-cell;
}
.table > thead > tr > .active,
.table > tbody > tr > .active,
.table > tfoot > tr > .active,
.table > thead > .active > td,
.table > tbody > .active > td,
.table > tfoot > .active > td,
.table > thead > .active > th,
.table > tbody > .active > th,
.table > tfoot > .active > th {
  background-color: #f2f2f2;
}