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>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>