Reintro vertical table lines + hover state (#2653)

Author: viktorrenkema

.changeset/tame-worms-march.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Improve readability of tables with hover style and vertical dividers

packages/gitbook/src/components/DocumentView/Table/table.module.css

@@ -27,33 +27,37 @@
 }
 
 .columnHeader {
-    @apply text-sm font-medium py-3 px-4 text-tint-900;
+    @apply text-sm font-medium py-2 px-4 text-tint-900;
 }
 
 :global(.dark) .columnHeader {
     @apply text-white;
 }
 
 .row {
-    @apply flex border-tint-700/2;
+    @apply flex border-tint-700/2 hover:bg-tint-700/2 transition-colors;
 }
 
 :global(.dark) .row {
     @apply border-tint-300/3;
 }
 
 .rowGroup {
-    @apply flex flex-col border rounded-lg bg-tint-800/1 border-tint-700/2;
+    @apply flex flex-col border rounded-lg bg-tint-800/1 border-tint-700/2 mb-1;
 }
 
 :global(.dark) .rowGroup {
     @apply bg-tint-300/2 border-tint-300/3;
 }
 
 .cell {
-    @apply flex-1 align-middle border-dark/2 py-2 px-4 text-sm;
+    @apply flex-1 align-middle border-tint-700/2 py-2 px-4 text-sm relative;
+}
+
+.cell:not(:last-child) {
+    @apply border-r;
 }
 
 :global(.dark) .cell {
-    @apply border-light/2;
+    @apply border-tint-300/3;
 }