TypedTableBlock: Add borders to help visualize rows and columns (#7670)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -29,6 +29,7 @@ Changelog
  * `admin/expanding_formset.js` has been renamed to `admin/expanding-formset.js` (LB (Ben Johnston))
  * Change docs URL to docs.wagtail.org (Jake Howard)
  * Update links to wagtail.io to point to new domain wagtail.org (Jake Howard)
+ * Add borders to TypedTableBlock to help visualize rows and columns (Scott Cranfill)
  * Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
  * Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
  * Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)

docs/releases/2.16.md

@@ -32,6 +32,7 @@
  * Change release check domain to releases.wagtail.org (Jake Howard)
  * Add the user who submitted a page for moderation to the "Awaiting your review" homepage summary panel (Tidiane Dia)
  * When moving pages, default to the current parent section (Tidjani Dia)
+ * Add borders to TypedTableBlock to help visualize rows and columns (Scott Cranfill)
 
 ### Bug fixes
 

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -11,8 +11,14 @@
         margin: 2.5rem 0 1rem 2.5rem;
     }
 
+    th,
+    td {
+        padding: 0.25rem;
+    }
+
     th {
         position: relative;
+        border: 2px solid $color-grey-2;
 
         button.prepend-column,
         button.append-column {
@@ -29,16 +35,25 @@
 
         input.column-heading {
             padding-right: 3rem;
+            font-weight: bold;
         }
     }
 
     td {
         position: relative;
+        border-left: 1px solid $color-grey-2;
+    }
+
+    th:first-child,
+    th:last-child,
+    td:first-child {
+        border-width: 0;
     }
 
     tbody tr,
     tfoot tr {
         position: relative;
+        border-top: 1px dotted $color-grey-2;
 
         button.prepend-row {
             left: -2rem;