How to split cells within Bootstrap table which have been already splited - html

Question

I have a bootstrap table which has multiple rows. I would like to split the cells into different section, I am able to split the row Split-1 but I am confused how to split the Split-1 into Split-2. I am trying to achieve Split-2 using rowspan but for some reason its getting messed up. Can someone please help me.
<table class="table table-bordered">
<tbody>
<tr>
<td rowspan="2" style="background-color: #a854a8;text-align: center;"> MAIN FIELD </td>
<td > TIME-1 </td>
<td>
<input type="datetime-local" class="form-control" ng-model="formdata.time" id="time" placeholder="Time 2">
</td>
</tr>
<tr>
<td style="background-color: #eedded;width: 10%;"> TIME-2 </td>
<td>
<input type="datetime-local" class="form-control" ng-model="formdata.time2" id="time2" placeholder="Time2">
</td>
</tr>
</tbody>
</table>

Answer 1

You were close... snippet below should help:
th {
background-color: lightpink;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<table class="table table-bordered">
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td rowspan="4" style="background-color: #a854a8;text-align: center;">Main field</td>
<td rowspan="2" style="background-color: #eedded;width: 10%;">Time1 split 1</td>
<td>split-2 result</td>
</tr>
<tr>
<td>split-2 result</td>
</tr>
<tr>
<td rowspan="2" style="background-color: #eedded;width: 10%;">Time2 split 1</td>
<td>split-2 result</td>
</tr>
<tr>
<td>split-2 result</td>
</tr>
</table>