Enable grid, frame and stripes styling on AsciiDoc tables

app/assets/stylesheets/framework/typography.scss

@@ -194,6 +194,117 @@
         border-color: $gl-gray-200;
       }
     }
+
+    &.grid-none > thead > tr > th {
+      border-bottom-width: 0;
+      border-right-width: 0;
+      border-left-width: 0;
+    }
+
+    &.grid-rows > thead > tr > th,
+    &.grid-rows > tbody > tr > td {
+      border-right-width: 0;
+      border-left-width: 0;
+    }
+
+    &.grid-none > thead > tr > th:first-child,
+    &.grid-rows > thead > tr > th:first-child {
+      border-left-width: 1px;
+    }
+
+    &.grid-none > thead > tr > th:last-child,
+    &.grid-rows > thead > tr > th:last-child {
+      border-right-width: 1px;
+    }
+
+    &.grid-none > tbody > tr > td {
+      border-width: 0;
+    }
+
+    &.grid-none > tbody > tr > td:first-child {
+      border-left-width: 1px;
+    }
+
+    &.grid-none > tbody > tr > td:last-child {
+      border-right-width: 1px;
+    }
+
+    &.grid-none > tbody > tr:last-child > td {
+      border-bottom-width: 1px;
+    }
+
+    &.grid-rows > tbody > tr > td {
+      border-left-width: 0;
+      border-right-width: 0;
+    }
+
+    &.grid-rows > tbody > tr > td:first-child {
+      border-left-width: 1px;
+    }
+
+    &.grid-rows > tbody > tr > td:last-child {
+      border-right-width: 1px;
+    }
+
+    &.grid-cols > thead > tr > th {
+      border-bottom-width: 0;
+    }
+
+    &.grid-cols > tbody > tr > td {
+      border-top-width: 0;
+      border-bottom-width: 0;
+    }
+
+    &.grid-cols > tbody > tr:last-child > td {
+      border-bottom-width: 1px;
+    }
+
+    &.frame-sides > thead > tr > th {
+      border-top-width: 0;
+    }
+
+    &.frame-sides > tbody > tr:last-child > td {
+      border-bottom-width: 0;
+    }
+
+    &.frame-topbot > thead > tr > th:first-child,
+    &.frame-ends > thead > tr > th:first-child,
+    &.frame-topbot > tbody > tr > td:first-child,
+    &.frame-ends > tbody > tr > td:first-child {
+      border-left-width: 0;
+    }
+
+    &.frame-topbot > thead > tr > th:last-child,
+    &.frame-ends > thead > tr > th:last-child,
+    &.frame-topbot > tbody > tr > td:last-child,
+    &.frame-ends > tbody > tr > td:last-child {
+      border-right-width: 0;
+    }
+
+    &.frame-none > thead > tr > th {
+      border-top-width: 0;
+    }
+
+    &.frame-none > tbody > tr:last-child > td {
+      border-bottom-width: 0;
+    }
+
+    &.frame-none > thead > tr > th:first-child,
+    &.frame-none > tbody > tr > td:first-child {
+      border-left-width: 0;
+    }
+
+    &.frame-none > thead > tr > th:last-child,
+    &.frame-none > tbody > tr > td:last-child {
+      border-right-width: 0;
+    }
+
+    &.stripes-all tr,
+    &.stripes-odd tr:nth-of-type(odd),
+    &.stripes-even tr:nth-of-type(even),
+    &.stripes-hover tr:hover {
+      background: $gray-light;
+    }
   }
 
   table:dir(rtl) th {

changelogs/unreleased/30839-asciidoc-table-styles.yml

+---
+title: Enable grid, frame and stripes styling on AsciiDoc tables
+merge_request: 18165
+author: Guillaume Grossetie
+type: fixed

lib/banzai/filter/ascii_doc_sanitization_filter.rb

@@ -22,6 +22,10 @@ module Banzai
       CHECKLIST_CLASSES = %w(fa fa-check-square-o fa-square-o).freeze
       LIST_CLASSES = %w(checklist none no-bullet unnumbered unstyled).freeze
 
+      TABLE_FRAME_CLASSES = %w(frame-all frame-topbot frame-sides frame-ends frame-none).freeze
+      TABLE_GRID_CLASSES = %w(grid-all grid-rows grid-cols grid-none).freeze
+      TABLE_STRIPES_CLASSES = %w(stripes-all stripes-odd stripes-even stripes-hover stripes-none).freeze
+
       ELEMENT_CLASSES_WHITELIST = {
         span: %w(big small underline overline line-through).freeze,
         div: ['admonitionblock'].freeze,
@@ -29,7 +33,8 @@ module Banzai
         i: ADMONITION_CLASSES + CALLOUT_CLASSES + CHECKLIST_CLASSES,
         ul: LIST_CLASSES,
         ol: LIST_CLASSES,
-        a: ['anchor'].freeze
+        a: ['anchor'].freeze,
+        table: TABLE_FRAME_CLASSES + TABLE_GRID_CLASSES + TABLE_STRIPES_CLASSES
       }.freeze
 
       def customize_whitelist(whitelist)
@@ -45,6 +50,7 @@ module Banzai
         whitelist[:attributes]['ul'] = %w(class)
         whitelist[:attributes]['ol'] = %w(class)
         whitelist[:attributes]['a'].push('class')
+        whitelist[:attributes]['table'] = %w(class)
         whitelist[:transformers].push(self.class.remove_element_classes)
 
         # Allow `id` in heading elements for section anchors