Org html: add ID links to tables

config.org

@@ -4821,13 +4821,26 @@ In order to accommodate wide tables ---particularly on mobile devices--- we want
 to set a maximum width and scroll overflow. Unfortunately, this cannot be applied
 directly to the ~table~ element, so we have to wrap it in a ~div~.
 
+While we're at it, we can a link gutter, as we did with src blocks, and show the
+~#+name~, if one is given.
+
 #+BEGIN_SRC emacs-lisp
 (defadvice! org-html-table-wrapped (orig-fn table contents info)
   "Wrap the usual <table> in a <div>"
   :around #'org-html-table
-  (concat "<div class='table'>"
-          (funcall orig-fn table contents info)
-          "</div>"))
+  (let* ((name (plist-get (cadr table) :name))
+         (ref (org-export-get-reference table info)))
+    (format "<div id='%s' class='table'>
+<div class='gutter'><a href='#%s'>#</a></div>
+<div class='tabular'>
+%s
+</div>\
+</div>"
+            ref ref
+            (if name
+                (replace-regexp-in-string (format "<table id=\"%s\"" ref) "<table"
+                                          (funcall orig-fn table contents info))
+              (funcall orig-fn table contents info)))))
 #+END_SRC
 ***** TOC as a collapsable tree
 The TOC is much nicer to navigate as a collapsable tree. Unfortunately we cannot

misc/pile-css-theme/_table.scss

@@ -1,6 +1,13 @@
 div.table {
-  max-width: 100%;
-  overflow-x: auto;
+  position: relative;
+  .gutter {
+    left: calc(20px - 2.5rem);
+    padding-top: 18px;
+  }
+  .tabular {
+    max-width: 100%;
+    overflow-x: auto;
+  }
 }
 
 table {

misc/pile-css-theme/main.css

@@ -2309,8 +2309,19 @@ td.org-center {
   text-align: center; }
 
 div.table {
-  max-width: 100%;
-  overflow-x: auto; }
+  position: relative; }
+  div.table .gutter {
+    left: calc(20px - 2.5rem);
+    padding-top: 18px; }
+  div.table .name {
+    position: absolute;
+    font-size: 14px;
+    font-family: "Open Sans";
+    left: 20px;
+    color: var(--text-medium); }
+  div.table .tabular {
+    max-width: 100%;
+    overflow-x: auto; }
 
 table {
   border-color: var(--text-light);