Add in-line table style

css/spruce.css

@@ -548,6 +548,16 @@ figure figcaption {
 .table--clear-border td {
   border: 0;
 }
+.table--in-line th:first-child,
+.table--in-line td:first-child {
+  -webkit-padding-start: 0;
+          padding-inline-start: 0;
+}
+.table--in-line th:last-child,
+.table--in-line td:last-child {
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+}
 .table--sm th,
 .table--sm td {
   padding: 0.25rem 0.5rem;

preview/pug/page/table.pug

@@ -86,3 +86,29 @@ block content
           td Last One
           td 2800
           td Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
+  h2(class='section-title') In Line
+  div(class='table-responsive')
+    table(class='table table--in-line')
+      thead
+        tr
+          th(scope='col') Person
+          th(scope='col') Number
+          th(scope='col') Third Column
+      tbody
+        tr
+          td Someone Lastname
+          td 900
+          td Nullam quis risus eget urna mollis ornare vel eu leo.
+        tr
+          td
+            a(href='#') Person Name
+          td 1200
+          td Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
+        tr
+          td Another Person
+          td 1500
+          td Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
+        tr
+          td Last One
+          td 2800
+          td Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

scss/element/_table.scss

@@ -53,6 +53,18 @@
       }
     }
 
+    &--in-line {
+      th:first-child,
+      td:first-child {
+        padding-inline-start: 0;
+      }
+
+      th:last-child,
+      td:last-child {
+        padding-inline-end: 0;
+      }
+    }
+
     &--sm {
       th,
       td {