英文:
overllaping Datatables columns on fixed columns while horizontal scrolling
问题
我已经使用DataTables创建了一个表格。我想要固定前两列。
但是当水平滚动时，其他两列会重叠在上面。
如果我移除固定列，表格会在水平滚动时正确显示，而如果我添加固定列，表格的列会在水平滚动时重叠。
在这里你可以看到"Capacity"列重叠在"Equipment Name"上：
HTML 代码：
<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 Distance</th>
<th>Equipment Price</th>
<th>Tyre Type</th>
<th>Tyre Count</th>
<th>Finance Fleet %</th>
<th>Target Profit %</th>
<th>Loan Amount %</th>
<th>Interest Rate %</th>
<th>Loan Years</th>
<th>Amortization Years</th>
<th>Residual Value</th>
<th>Maintenance Cost/Unit Distance</th>
<th>Tax</th>
<th>Insurance</th>
<th>Admin Cost</th>
<th>Other Cost (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 代码：
<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>
如何固定前两列而不重叠。1: https://i.stack.imgur.com/AHlo6.png
英文:
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.
答案1
得分: 0
这对我有效：
我已将样式“背景颜色”和“z-index”设置为固定列。表示前2列。
<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;">设备名称</th>
<th>容量</th>
<th>年度<br/>距离</th>
<th>设备<br/>价格</th>
<th>轮胎类型</th>
<th>轮胎<br/>数量</th>
<th>财务<br/>车队%</th>
<th>目标<br/>利润%</th>
<th>贷款<br/>金额%</th>
<th>利率<br/>%</th>
<th>贷款<br/>年限</th>
<th>分期偿还<br/>年限</th>
<th>残值</th>
<th>维护费用/单位<br/>距离</th>
<th>税</th>
<th>保险</th>
<th>管理<br/>费用</th>
<th>其他费用<br/>(杂项)</th>
<th>操作</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>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论