Issue with bootstrap table plugin when extended from base html

Hello All,

I have issue with extended from base html , to display correctly table with DataTables the table appear but not how its should be with show ,search etc… its appear as simple table .

good table

Any idea?

Please advice

Thanks

{% extends 'base.html'%}

{% load staticfiles %}


{% block content %}
   <!--accordion css-->
    <link href="{% static 'css/tasks_view_style.css' %}" rel="stylesheet">
    <!---CSS Bootstrap 4Table-->
    <link href="{% static 'css/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
  <!---Table content-->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Basic Datatable</h5>
                    <div class="table-responsive">
                        <table id="zero_config" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Task Name</th>
                                    <th>Person Assign</th>
                                    <th>Date Sterted</th>
                                    <th>Due Date</th>
                                    <th>Status</th>
                                    <th>Completed</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>< alt="user" data-toggle="tooltip" data-placement="top" title="" data-original-title="Steave"> Tiger Nixon</td>
                                    <td>System Architect</td>
                                    <td>2019/04/25</td>
                                    <td>2019/05/25</td>
                                    <td><button type="button" class="btn btn-success text-white">In Progress</button></td>
                                    <td><div class="progress mt-2" style="height: 20px">
                                        <div class="progress-bar progress-bar-striped font-weight-bold bg-info" style="width: 10%">
                                          10%
                                        </div>
                                      </div></td>
                                </tr>



                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Task Name</th>
                                    <th>Person Assign</th>
                                    <th>Date Sterted</th>
                                    <th>Due Date</th>
                                    <th>Status</th>
                                    <th>Completed</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                </div>
            </div>
            <!---End of Table Content -->
        </div>
    </div>
     <!---End content Table-->
    </div>

    </section>

    {% endblock content %}

{% block extra_js %}
    <!-- Optional JavaScript -->

    <script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'js/dataTables.bootstrap4.min.js' %}"></script>
    <!--Basic Table-->

    <script>

        $(document).ready(function() {
          $('#zero_config').DataTable();
      } );
    </script>
{% endblock extra_js %}