Table is responsive on mobile

templates/product.html.twig

@@ -1,6 +1,7 @@
 {% extends "template.html.twig" %}
 
 {% block content %}
+    <div class="table-responsive">
         <table class='table table-hover'>
             <tr>
                 <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
@@ -14,7 +15,8 @@
                     <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                         <ol class="breadcrumb">
                             {% for category in product.categories %}
-                            <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"  href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
+                                <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"
+                                                                                   href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
                             {% endfor %}
                         </ol>
                     </nav>
@@ -52,6 +54,7 @@
                 </td>
             </tr>
         </table>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
     <script>

templates/productList.html.twig

@@ -1,6 +1,7 @@
 {% extends "template.html.twig" %}
 
 {% block content %}
+<div class="table-responsive">
     <table class='table table-hover'>
         <thead>
         <tr>
@@ -55,4 +56,5 @@
             </tr>
         {% endfor %}
     </table>
+</div>
 {% endblock %}