Merge pull request #272 from RockefellerArchiveCenter/development

improve docs/story for making tables responsive

Author: HaSistrunk

stories/components/table/Table.mdx

@@ -18,8 +18,9 @@ Tables should not be used to control layout of a web page.
 
 - Always use the base `table` class to improve the display of the table.
 - Keep tables as simple as possible and avoid tables with many columns that cannot be
-made responsive on small screens. Apply the `table-responsive` class to tables
-to enable horizontal scrolling when they are too wide for the screen.
+made responsive on small screens.
+- Apply the `table-responsive` class to a container div around the table
+element to enable horizontal scrolling when they are too wide for the screen.
 
 ## Related components
 

stories/components/table/table.handlebars

@@ -1,37 +1,39 @@
-<table class="table{{#if striped}} table-striped{{/if}}">
-    <thead>
-        <tr>
-            {{#if inputs}}<th id="select">Select</th>{{/if}}
-            <th{{#if inputs}} id="title"{{/if}}>Title</th>
-            <th{{#if inputs}} id="date"{{/if}}>Date</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            {{#if inputs}}<td><input type="checkbox" id="1" aria-labelledby="select row01"></td>{{/if}}
-            <th scope="row"{{#if inputs}} id="row01"{{/if}}>Pie Making Grant</th>
-            <td>2021</td>
-        </tr>
-        <tr>
-            {{#if inputs}}<td><input type="checkbox" id="2" aria-labelledby="select row02"></td>{{/if}}
-            <th scope="row"{{#if inputs}} id="row02"{{/if}}><a href="" target="_blank">Cupcake Makers Association of America</a></th>
-            <td>2023</td>
-        </tr>
-        <tr>
-            {{#if inputs}}<td><input type="checkbox" id="3" aria-labelledby="select row03"></td>{{/if}}
-            <th scope="row"{{#if inputs}} id="row03"{{/if}}><a href="" target="_blank">Brownie Purveyors Society</a></th>
-            <td>2024</td>
-        </tr>
-        <tr>
-            {{#if inputs}}<td><input type="checkbox" id="4" aria-labelledby="select row04"></td>{{/if}}
-            <th scope="row"{{#if inputs}} id="row04"{{/if}}>Cookie Creation Center</th>
-            <td>
-                 <ul>
-                    <li>2022</li>
-                    <li>2023</li>
-                    <li>2024</li>
-                </ul>
-            </td>
-        </tr>
-    </tbody>
-</table>
+<div class="table-responsive">
+    <table class="table{{#if striped}} table-striped{{/if}}">
+        <thead>
+            <tr>
+                {{#if inputs}}<th id="select">Select</th>{{/if}}
+                <th{{#if inputs}} id="title"{{/if}}>Title</th>
+                <th{{#if inputs}} id="date"{{/if}}>Date</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                {{#if inputs}}<td><input type="checkbox" id="1" aria-labelledby="select row01"></td>{{/if}}
+                <th scope="row"{{#if inputs}} id="row01"{{/if}}>Pie Making Grant</th>
+                <td>2021</td>
+            </tr>
+            <tr>
+                {{#if inputs}}<td><input type="checkbox" id="2" aria-labelledby="select row02"></td>{{/if}}
+                <th scope="row"{{#if inputs}} id="row02"{{/if}}><a href="" target="_blank">Cupcake Makers Association of America</a></th>
+                <td>2023</td>
+            </tr>
+            <tr>
+                {{#if inputs}}<td><input type="checkbox" id="3" aria-labelledby="select row03"></td>{{/if}}
+                <th scope="row"{{#if inputs}} id="row03"{{/if}}><a href="" target="_blank">Brownie Purveyors Society</a></th>
+                <td>2024</td>
+            </tr>
+            <tr>
+                {{#if inputs}}<td><input type="checkbox" id="4" aria-labelledby="select row04"></td>{{/if}}
+                <th scope="row"{{#if inputs}} id="row04"{{/if}}>Cookie Creation Center</th>
+                <td>
+                    <ul>
+                        <li>2022</li>
+                        <li>2023</li>
+                        <li>2024</li>
+                    </ul>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>