Ellided cells a bit more visible (skrub-data#1085)

skrub/_reporting/_data/templates/dataframe-sample.css

@@ -92,16 +92,27 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
 
 /* The gap separating the head and the tail of the table */
 
-#report .ellided-table-part {
-    border: 1px solid white;
+#report .ellided-table-part,
+#report .ellided-table-part td {
+    border: 2px dashed var(--mediumg);
     text-align: center;
     border-top: 0;
     border-bottom: 0;
     background: inherit;
 }
 
-#report table:has([data-role="index-level-value"]) .ellided-table-part:first-child{
-    text-align: right;
+#report .ellided-table-part td {
+    padding: var(--tiny);
+}
+
+#report .ellipsis-icon {
+    display: flex;
+    flex-direction: column;
+    max-height: var(--large);
+}
+
+#report table:has([data-role="index-level-value"]) .ellided-table-part td:first-child .ellipsis-icon * {
+    align-self: flex-end;
 }
 
 .table-bar-wrapper {

skrub/_reporting/_data/templates/dataframe-sample.html

@@ -26,17 +26,16 @@
         >
             {% for table_part in summary["sample_table"]["parts"] %}
             {% if table_part["name"] == "ellipsis" %}
-            <tbody>
+            <tbody class="ellided-table-part">
                 <tr>
                     {% for i in range(summary["sample_table"]["start_j"], summary["sample_table"]["stop_j"])%}
                     <td
-                        class="ellided-table-part"
                         {% if i >= 0%}
                         data-manager="FilterableColumn"
                         data-column-idx="{{ i }}"
                         data-role="ellipsis"
                         {% endif %}
-                    >⋮</td>
+                        ><div class="ellipsis-icon">{% include "icons/three-dots-vertical.svg" %}</div></td>
                     {% endfor %}
                 </tr>
             </tbody>