overllaping Datatables columns on fixed columns while horizontal scrolling

I have created table using datatables. I want to fixed first 2 columns.

But other two columns are overllaping on it while scrolling horizontally.

If I take the fixed column out, the table Scrolls correctly without overllaping and If I add the fixed column, the tables columns overlaps on fixed columns while scrolling horizontally

Here you can see how Capacity column is overllaping on Equipment Name:

Html Code:

<style>
.bg-dark {
background-color: #2980b9 !important;
}
.thead-dark th {
background-color: #2980b9 !important;
}
body {
font-family: 'Nunito Sans', sans-serif;
}
.table td,
.table th {
height: 1em;
font-size: 12px !important;
padding: 5px 5px;
}
.table-scroll {
overflow-x: scroll;
}
</style>
<div class="card-body">
<div class="table-responsive">
<table class="table dataTable table-striped table-bordered" id="equipmentCostData">
<thead class="thead-dark">
<tr>
<th>OPCO</th>
<th>Equipment Name</th>
<th>Capacity</th>
<th>Annual<br/> Distance</th>
<th>Equipment <br/> Price</th>
<th>Tyre Type</th>
<th>Tyre <br/> Count</th>
<th>Finance<br/> Fleet %</th>
<th>Target <br/> Profit %</th>
<th>Loan <br/> Amount %</th>
<th>Interest <br/> Rate %</th>
<th>Loan<br/> Years</th>
<th>Amortization <br/> Years</th>
<th>Residual<br/> Value</th>
<th>Maintenance Cost/Unit <br/> Distance</th>
<th> Tax </th>
<th>Insurance</th>
<th>Admin <br/> Cost</th>
<th>Other Cost <br/> (Misc.)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for e in equipment %}
<tr id="{{e.id}}">
<td>{{e.opco_id__opco_name}}</td>
<td>{{e.equipment_name}}</td>
<td>{{e.capacity}}</td>
<td>{{e.annual_distance}}</td>
<td>{{e.cost}}</td>
<td>{{e.tyre_type_id__tyre_type}}</td>
<td>{{e.tyre_count}}</td>
<td{{e.finance_fleet}}</td>
<td>{{e.target_profit}}</td> 
<td>{{e.loan_amount}}</td> 
<td>{{e.interest_rate}}</td>
<td>{{e.loan_years}}</td>
<td>{{e.amotization_years}}</td>
<td>{{e.residual_value}}</td>
<td>{{e.maintenance_cost_per_unit_distance}}</td>
<td>{{e.tax}}</td>
<td>{{e.insurance}}</td>
<td>{{e.admin_cost}}</td>
<td>{{e.other_cost}}</td>
<td> 
<i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
<i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>

Javascript Code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> -->
<script
type="text/javascript"
src="{% static 'js/jquery.datatables.min.js' %}"
></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>   
<script>
$(document).ready(function () {
var table = $("#equipmentCostData").DataTable({ 
fixedColumns: true,
fixedColumns: {
left: 2,
right: 0
},
responsive: true,
});
});
</script>

How Can I Fixed 2 Columns without overllapping it.

This works for me:

I have set style background colour and z-index to the fixed columns. Means First 2 columns.

<div class="card-body">
<div class="table-responsive">
<table class="table dataTable table-striped table-bordered" id="equipmentCostData">
<thead class="thead-dark">
<tr>
<th style="z-index: 2 !important;">OPCO</th>
<th style="z-index: 2 !important;">Equipment Name</th>
<th>Capacity</th>
<th>Annual<br/> Distance</th>
<th>Equipment <br/> Price</th>
<th>Tyre Type</th>
<th>Tyre <br/> Count</th>
<th>Finance<br/> Fleet %</th>
<th>Target <br/> Profit %</th>
<th>Loan <br/> Amount %</th>
<th>Interest <br/> Rate %</th>
<th>Loan<br/> Years</th>
<th>Amortization <br/> Years</th>
<th>Residual<br/> Value</th>
<th>Maintenance Cost/Unit <br/> Distance</th>
<th> Tax </th>
<th>Insurance</th>
<th>Admin <br/> Cost</th>
<th>Other Cost <br/> (Misc.)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for e in equipment %}
<tr id="{{e.id}}">
<td style="background-color: white !important;">{{e.opco_id__opco_name}}</td>
<td style="background-color: white !important;">{{e.equipment_name}}</td>
<td>{{e.capacity}}</td>
<td>{{e.annual_distance}}</td>
<td>{{e.cost}}</td>
<td>{{e.tyre_type_id__tyre_type}}</td>
<td>{{e.tyre_count}}</td>
<td{{e.finance_fleet}}</td>
<td>{{e.target_profit}}</td> 
<td>{{e.loan_amount}}</td> 
<td>{{e.interest_rate}}</td>
<td>{{e.loan_years}}</td>
<td>{{e.amotization_years}}</td>
<td>{{e.residual_value}}</td>
<td>{{e.maintenance_cost_per_unit_distance}}</td>
<td>{{e.tax}}</td>
<td>{{e.insurance}}</td>
<td>{{e.admin_cost}}</td>
<td>{{e.other_cost}}</td>
<td> 
<i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
<i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>