Fix table overflow issue. Add fixed-table class (GoogleChrome#335)

robdodson · web-flow · commit bd87faa7ee40 · 2020-11-30T12:34:08.000-08:00
diff --git a/site/_includes/macros/reference.njk b/site/_includes/macros/reference.njk
@@ -4,7 +4,7 @@
 #}
 {% macro renderReferenceTable(all, channel) %}
 
-<table class="reference">
+<table class="reference fixed-table width-full">
   <thead>
     <tr>
       <th>Name</th>
diff --git a/site/_scss/_reset.scss b/site/_scss/_reset.scss
@@ -71,11 +71,6 @@ select {
   word-spacing: inherit;
 }
 
-// Remove the whitespace between table cells
-table {
-  border-collapse: collapse;
-}
-
 // Remove the default border on iframes
 iframe {
   border: 0;
@@ -87,11 +82,6 @@ img:not([alt]) {
   filter: blur(10px);
 }
 
-// Always place table captions on the bottom.
-caption {
-  caption-side: bottom;
-}
-
 // Define a basic hairline element.
 hr {
   height: 1px;
diff --git a/site/_scss/blocks/_table.scss b/site/_scss/blocks/_table.scss
@@ -18,11 +18,10 @@
 
 table {
   border: 1px solid var(--color-hairline);
-  display: block;
+  border-collapse: collapse;
   margin-left: auto;
   margin-right: auto;
-  max-width: fit-content;
-  overflow-x: auto;
+  overflow-x: scroll;
 }
 
 th {
@@ -41,5 +40,6 @@ tr:only-of-type {
 
 caption {
   border-top: 1px solid var(--color-hairline);
+  caption-side: bottom;
   padding: get-size(300);
 }
diff --git a/site/_transforms/tables.js b/site/_transforms/tables.js
@@ -5,7 +5,7 @@
  * will be modified in place.
  */
 const tables = $ => {
-  $('table').each((_, elem) => {
+  $('table:not(.fixed-table)').each((_, elem) => {
     const $elem = $(elem);
     $elem.replaceWith(`<div class="responsive-table">${$elem}</div>`);
   });
diff --git a/site/en/style-guide/index.njk b/site/en/style-guide/index.njk
@@ -164,6 +164,36 @@ title: Style guide
     </tbody>
   </table>
 
+  <table class="fixed-table width-full">
+    <tbody>
+      <tr>
+        <th>Person</th>
+        <th>Number</th>
+        <th>Third Column</th>
+      </tr>
+      <tr>
+        <td>Someone Lastname</td>
+        <td>900</td>
+        <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
+      </tr>
+      <tr>
+        <td><a href="#">Person Name</a></td>
+        <td>1200</td>
+        <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td>
+      </tr>
+      <tr>
+        <td>Another Person</td>
+        <td>1500</td>
+        <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
+      </tr>
+      <tr>
+        <td>Last One</td>
+        <td>2800</td>
+        <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td>
+      </tr>
+    </tbody>
+  </table>
+
   <dl>
     <dt>Definition List Title</dt>
     <dd>Definition list division.</dd>
