Fixed columns with horizontal scrolling to prevent Datatables columns from overlapping

Question

Fixed columns with horizontal scrolling to prevent Datatables columns from overlapping

I'm facing an issue with my data table created using datatables. I need to fix the first two columns, but when I do so, the other two columns overlap them while scrolling horizontally. If I remove the fixed columns, the scrolling works correctly without any overlap. Here is an example where the Capacity column is overlapping the Equipment Name: https://i.sstatic.net/AHlo6.png

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>

...

<p>Javascript Code:</p>
<pre><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>

Is there a way to fix the first two columns without overlap while scrolling horizontally?

javascript html jquery css datatables

Answer 1

Answer №1

My Solution:

To fix the columns, I adjusted the style settings for background color and z-index for the first two 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>

Answer 2

My Solution:

To fix the columns, I adjusted the style settings for background color and z-index for the first two 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>

Fixed columns with horizontal scrolling to prevent Datatables columns from overlapping

Answer №1

Similar questions

Is there a way to link the datepicker of one calendar to automatically sync with another under specific circumstances?

Can you explain the significance of these specific HTML attributes within the button tag?

Storing distinct values in separate variables within a JavaScript for loop

The fixed-top navigation bar in Bootstrap obscures the links within the #content

Having trouble getting the innerHTML update to be triggered by onchange

Error message: The 'Access-Control-Allow-Origin' policy is preventing access in a react express docker application

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

The iframe content is not updating despite using jQuery

Incorporate pictures from the popup onto the main page

DIV size issue resolved

What causes the Object expected error in jQuery?

Jquery's remove function fails to function correctly when used on a cloned element

Switching from an AJAX GET request to a POST request involves updating the

Tool to track character limits in multiple text fields

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

What is needed to enable the functionality of the next and previous buttons? (Carousel Bootstrap)

Determining the scroll position of a JQuery Mobile collapsible set upon expansion

What is the best way to bring in an image when the resolution falls below 700 pixels?

Tips on sending data with a unique identifier to the backend through a route parameter

What are some ways to customize the text and button location for Bootstrap 5's file input?