fix: add styling for markdown tables (#921)

Adds some basic styles to clean up the appearance of the Markdown-generated tables.

Author: crisbeto

material.angular.io/src/styles/_markdown-theme.scss

@@ -32,5 +32,11 @@
     code {
       background: rgba(mat-color($foreground, secondary-text), $exportBackgroundOpacity);
     }
+
+    > table {
+      th, td {
+        border-bottom-color: mat-color($foreground, divider);
+      }
+    }
   }
 }

material.angular.io/src/styles/_markdown.scss

@@ -35,10 +35,6 @@
     text-decoration: none;
   }
 
-  td code {
-    font-size: 14px;
-  }
-
   pre {
     border-radius: 5px;
     display: block;
@@ -56,6 +52,30 @@
   code {
     padding: 3px;
   }
+
+  // Target direct descendants here so that the styles don't bleed into the live examples.
+  > table {
+    text-align: left;
+    table-layout: fixed;
+    border-collapse: collapse;
+    margin-bottom: 1em;
+    font-size: 14px;
+
+    tr {
+      height: 48px;
+    }
+
+    th, td {
+      padding: 8px 4px 8px 0;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+
+    // Code tends to wrap inside tables which doesn't look great with the background color.
+    code {
+      background: transparent;
+    }
+  }
 }
 
 .docs-header-link {