minor #127 Add a wrapper element for tables (javiereguiluz)

This PR was merged into the main branch.

Discussion
----------

Add a wrapper element for tables

We need this to make tables responsive ... and not only in small devices.

See for example the super wide table in this section: https://symfony.wip/doc/current/mailer.html#using-a-3rd-party-transport

Question: is there any way to reuse the original template from doctrine/rst-parser? Our new template is literally `<div class="table-wrapper"> {{ the_old_template }} </div>` so it's sad to duplicate the old template entirely. Thanks!

Commits
-------

08654dd Add a wrapper element for tables

Author: javiereguiluz

src/Templates/default/html/table.html.twig

@@ -0,0 +1,24 @@
+<div class="table-wrapper">
+<table{% if tableNode.classes %} class="{{ tableNode.classesString }}"{% endif %}>
+    {% if tableHeaderRows is not empty %}
+        <thead>
+            {% for tableHeaderRow in tableHeaderRows %}
+                <tr>
+                    {% for column in tableHeaderRow.columns %}
+                        <th{% if column.colspan > 1 %} colspan="{{ column.colspan }}"{% endif %}>{{ column.render|raw }}</th>
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+        </thead>
+    {% endif %}
+    <tbody>
+        {% for tableRow in tableRows %}
+            <tr>
+                {% for column in tableRow.columns %}
+                    <td{% if column.colSpan > 1 %} colspan="{{ column.colSpan }}"{% endif %}{% if column.rowSpan > 1 %} rowspan="{{ column.rowSpan }}"{% endif %}>{{ column.render|raw }}</td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+</div>

tests/fixtures/expected/blocks/nodes/tables.html

@@ -1,5 +1,6 @@
 <p>Simple table with head:</p>
 
+<div class="table-wrapper">
 <table>
             <thead>
                             <tr>
@@ -21,6 +22,7 @@
                             </tr>
             </tbody>
 </table>
+</div>
 
 <table>
     <thead>
@@ -62,6 +64,7 @@
 
 <p>Simple table headless:</p>
 
+<div class="table-wrapper">
 <table>
     <tbody>
         <tr>
@@ -76,6 +79,7 @@
         </tr>
     </tbody>
 </table>
+</div>
 
 <table>
     <tbody>
@@ -92,6 +96,7 @@
 
 <p>Grid table:</p>
 
+<div class="table-wrapper">
 <table>
         <tbody>
                     <tr>
@@ -109,9 +114,11 @@
                             </tr>
             </tbody>
 </table>
+</div>
 
 <p>Grid table with head:</p>
 
+<div class="table-wrapper">
 <table>
             <thead>
                             <tr>
@@ -131,9 +138,11 @@
                             </tr>
             </tbody>
 </table>
+</div>
 
 <p>Grid table with head and multi-line cells:</p>
 
+<div class="table-wrapper">
 <table>
             <thead>
                             <tr>
@@ -161,3 +170,4 @@
                             </tr>
             </tbody>
 </table>
+</div>