这是我的html表。在此表中，我必须使用行跨度。
HTML代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="overflow-x: auto;">
<%-- table start--%>
<table `enter code here`id="tblINDDetails" class="datatable table table-bordered">
<thead>
<%-- header row start--%>
<tr style="text-align: center; background-color: #e7fbff;">
<th style="vertical-align: top; text-align: center;" rowspan="3">
Sr.No.
</th>
<th style="vertical-align: top; text-align: center;" rowspan="3">
Indicator Level
</th>
<th style="vertical-align: top; text-align: center;" rowspan="3">
Indicator
</th>
<th style="vertical-align: top; text-align: center;" colspan="4">
Baseline
</th>
<th style="vertical-align: top; text-align: center;" colspan="2">
Baseline Period
</th>
<th style="vertical-align: top; text-align: center;">
Reporting Cycle
</th>
<th style="vertical-align: top; text-align: center;" colspan="4">
Reporting Period and Targets
</th>
<th style="vertical-align: top; text-align: center;">
Target Cumulative Over Period
</th>
<th style="vertical-align: top; text-align: center;">
Comments/Remarks
</th>
<th style="vertical-align: top; text-align: center;">
Standard Indicator
</th>
<th>
</th>
</tr>
<tr style="text-align: center; background-color: #e7fbff;">
<th>
Numerator
</th>
<th>
Number
</th>
<th>
Denominator
</th>
<th>
Percent
</th>
<th>
Month
</th>
<th>
Year
</th>
<th>
</th>
<th nowrap="">
Q1
</th>
<th nowrap="">
Q2
</th>
<th nowrap="">
Q3
</th>
<th nowrap="">
Q4
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr style="text-align: center; background-color: #e7fbff;">
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th nowrap="">
01-Aug-18 to
<br>
31-Oct-18
</th>
<th nowrap="">
01-Nov-18 to
<br>
31-Jan-19
</th>
<th nowrap="">
01-Feb-19 to
<br>
36-Apr-19
</th>
<th nowrap="">
01-May-19 to
<br>
31-Jul-19
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center">
<input type="hidden" value="1">
<td style="vertical-align: top;">
</td>
<td style="vertical-align: top;">
<select style="width: 200px; color: Black; height: 36px" id="ddlIndicatorLevel" class="P20 claimBox claimBox2 ddlRequiredInd">
<option selected="" value="">--Select--</option>
<option value="1">Impact</option>
<option value="2">Outcome</option>
<option value="3">Output</option>
<option value="4">Process</option>
</select>
</td>
<td style="vertical-align: top" nowrap="">
<select style="width: 200px; color: Black; height: 36px" id="ddlIndicators" class="P20 claimBox claimBox2 ddlRequiredInd">
<option selected="selected" value="">--Select--</option>
<option value="1">Number of trainings conducted for Anganwadi Workers (Karyakartis)
and supervisors during the year</option>
<option value="2">Number of trainings conducted for Anganwadi helpers (Madatnis)</option>
<option value="3">Number of Anganwadi workers (Karykartis) trained in each quarter</option>
<option value="4">Number of Anganwadi helpers ( Madatnis) trained in each quarter</option>
<option value="5">Number of supervisors (Mukhyasevika) trained each quarter</option>
<option value="6">Number of Anganwadis implementing the Daily Routine/ carriculum</option>
<option value="7">Facilitators retained per quarter in percentage terms </option>
<option value="8">Percentage of Anganwadis using the Muktangan Toolkit post its induction
(in selected AWs)</option>
<option value="9">Percentage of children where atleast 1 level change is observed in
learning outcomes of sample selected of those AWs covered in the handholding and/or
training </option>
<option value="10">Baseline Survey for child assessment for selected AW children</option>
<option value="11">Endline survey for child assessment for selected AW children
</option>
</select>
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Numerator" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Number" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Denominator" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Percent" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Month" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Year" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<select style="width: 140px; color: Black; height: 36px" id="ddlReportingCycle" class="P20 claimBox claimBox2 ddlRequiredIndRep">
<option value="0">--Select--</option>
<option value="QUARTERLY">Quarterly</option>
<option value="BIANNUAL">Biannual</option>
<option value="ANNUAL">Annual</option>
</select>
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Q1" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Q2" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Q3" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Q4" style="height: 36px; width: 108px;">
</td>
<td style="vertical-align: top">
<select style="width: 100px; color: Black; height: 36px" id="ddlTarCumuOverPerd"
class="P20 claimBox claimBox2 ddlRequiredInd1">
<option value="0">--Select--</option>
<option value="NO">No</option>
<option value="YES">Yes</option>
</select>
</td>
<td style="vertical-align: top">
<input type="text" placeholder="Remark" style="height: 36px">
</td>
<td style="vertical-align: top">
<select style="width: 140px; color: Black; height: 36px" id="Select3" class="P20 claimBox claimBox2 ddlRequiredInd1">
<option value="0">--Select--</option>
<option value="SI">SI</option>
<option value="SIEQUIVALENT">SI Equivalent</option>
<option value="NOTSI">Not SI</option>
</select>
</td>
<td>
<i class="fa fa-save" style="font-size: 25px; color: red" data-toggle="tooltip" data-placement="top"
title="Save"></i>
</td>
</tr>
<tr style="text-align: center">
<td style="vertical-align: top">
1
</td>
<td style="vertical-align: top">
Outcome
</td>
<td style="vertical-align: top">
Number of trainings conducted for Anganwadi helpers (Madatnis)
</td>
<td style="vertical-align: top">
1
</td>
<td style="vertical-align: top">
1
</td>
<td style="vertical-align: top">
1
</td>
<td style="vertical-align: top">
1
</td>
<td style="vertical-align: top">
4
</td>
<td style="vertical-align: top">
2018
</td>
<td style="vertical-align: top">
Annual
</td>
<td style="vertical-align: top">
100
</td>
<td style="vertical-align: top">
100
</td>
<td style="vertical-align: top">
100
</td>
<td style="vertical-align: top">
100
</td>
<td style="vertical-align: top">
No
</td>
<td style="vertical-align: top">
Remark
</td>
<td style="vertical-align: top">
SI
</td>
<td style="vertical-align: top">
<i class="fa fa-edit" style="font-size: 25px; color: red" data-toggle="tooltip" data-placement="top"
title="Edit"></i>
</td>
</tr>
</tbody>
</table>
</div>
现在，我要冻结表的前三列。如何实现呢？