Datatable block : Upgrade and fix draggable

app/assets/stylesheets/commons/_block.sass

@@ -3,4 +3,28 @@
         display: none
 [data-v-app]
     .spinner-border
-        display: none
\ No newline at end of file
+        display: none
+
+.fake-table
+    display: table
+    border-collapse: collapse
+    caption-side: bottom
+    border: 1px solid $border-color
+    .thead, .tbody
+        display: table-row-group
+    .tr
+        display: table-row
+        border-bottom: 1px solid $border-color
+    .td
+        display: table-cell
+        min-width: 120px
+        &:not(:first-child)
+            border-left: 1px solid  $border-color
+    .thead
+        white-space: nowrap
+    .tbody
+        .tr
+            &:nth-child(even)
+                background: $table-striped-bg
+            &:hover
+                background: $table-hover-bg

app/views/admin/communication/blocks/templates/datatable/_edit.html.erb

 <div class="table-responsive mb-5">
-  <table class="table table-bordered table-hover">
-    <thead>
-      <tr>
-        <td v-for="(column, index) in data.columns">
+  <div class="fake-table table">
+    <div class="thead">
+      <div class="tr">
+        <div class="td" v-for="(column, index) in data.columns">
           <div class="d-flex">
             <input  type="text"
                     class="form-control"
@@ -12,8 +12,8 @@
                 <i class="fas fa-times"></i>
             </a>
           </div>
-        </td>
-        <td class="text-end">
+        </div>
+        <div class="td text-end">
           <a  class="btn btn-primary me-2"
               v-on:click="data.columns.push('')">
               <i class="fas fa-plus"></i> colonne
@@ -22,33 +22,31 @@
               v-on:click="data.elements.push({cells: []})">
               <i class="fas fa-plus"></i> ligne
           </a>
-        </td>
-      </tr>
-    </thead>
-    <tbody>
-      <draggable :list="data.elements" handle=".dragHandle">
-        <tr v-for="(row, index) in data.elements">
-          <td v-for="(column, columnIndex) in data.columns">
-            <input  type="text"
-                    class="form-control"
-                    v-model="row.cells[columnIndex]">
-          </td>
-          <td class="text-end">
-            <div class="d-flex">
-              <a  class="btn btn-danger"
-                  v-on:click="data.elements.splice(index, 1)">
-                  <i class="fas fa-times"></i>
-              </a>
+        </div>
+      </div>
+    </div>
+    <draggable :list="data.elements" handle=".dragHandle" class="tbody">
+      <div class="tr" v-for="(row, index) in data.elements">
+        <div class="td" v-for="(column, columnIndex) in data.columns">
+          <input  type="text"
+                  class="form-control"
+                  v-model="row.cells[columnIndex]">
+        </div>
+        <div class="td" class="text-end">
+          <div class="d-flex">
+            <a  class="btn btn-danger"
+                v-on:click="data.elements.splice(index, 1)">
+                <i class="fas fa-times"></i>
+            </a>
 
-              <a class="btn ms-auto dragHandle">
-                <i class="fa fa-bars handle"></i>
-              </a>
-            </div>
-          </td>
-        </tr>
-      </draggable>
-    </tbody>
-  </table>
+            <a class="btn ms-auto dragHandle">
+              <i class="fa fa-bars handle"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </draggable>
+  </div>
 </div>
 
 <div class="row">