'Bootstrap DataTable is not responsive

I have this Bootstrap DataTable, with the following HTML and Javascript code, without any additional CSS. Following the documentation, I tried to insert the various responsive operations inside the Javascript code, but nothing seems to work. The table does not shrink with the page and does not flex. All the additional links have been imported, so I don't really understand where the problem might be.:

$(document).ready(function() {
    $("#feedback").DataTable({
        aaSorting: [],
        responsive: true,
        columnDefs: [
            {
                responsivePriority: 1,
                targets: 0
            },
            {
                responsivePriority: 2,
                targets: -1
            }
        ]
    });
    $('[data-toggle="tooltip"]').tooltip();
} );
<div id="div-feedback" class="container">
              <div class="row py-5">
                  <div class="col-12">
                        <table id="feedback" class="table table-striped table-bordered responsive" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>#ID</th>
                                <th>Titolo</th>
                                <th>Commento</th>
                                <th>Valutazione</th>
                                <th>Azione</th>
                             </tr>
                        </thead>
                <tbody>
                    <% 
                        if ( feedback != null &&  feedback.size() != 0) {
                                    for ( FeedbackBean  fb: feedback) {
                            %>
                    <tr>
                        <td><%=fb.getIdFeedback() %></td>
                        <td><%=fb.getTitolo() %></td>
                        <td><%=fb.getCommento() %></td>
                        <td><%=fb.getValutazione() %></td>
                        <td><button type="button" class="btn bg-cart">Elimina</button></td>
                    </tr>
                  <%}} %>
                </tbody>
                    </table>
                </div>
            </div>
        </div>
javascripthtmlcsstwitter-bootstrapdatatables


Solution 1:[1]

you have to give responsive class parent container

<div class="table-responsive">
<table class="table table-striped table-bordered">...</table>
</div>


<div id="div-feedback" class="container">
  <div class="table-responsive">
    <table id="feedback" class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>#ID</th>
          <th>Titolo</th>
          <th>Commento</th>
          <th>Valutazione</th>
          <th>Azione</th>
        </tr>
      </thead>
      <tbody>
        <% 
                        if ( feedback != null &&  feedback.size() != 0) {
                                    for ( FeedbackBean  fb: feedback) {
                            %>
          <tr>
            <td>
              <%=fb.getIdFeedback() %>
            </td>
            <td>
              <%=fb.getTitolo() %>
            </td>
            <td>
              <%=fb.getCommento() %>
            </td>
            <td>
              <%=fb.getValutazione() %>
            </td>
            <td><button type="button" class="btn bg-cart">Elimina</button></td>
          </tr>
          <%}} %>
      </tbody>
    </table>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions