chore(table): added thead line for scrolling, reverted table contraint (

#2473)

.changeset/moody-otters-wait.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+chore(table): added thead line for scrolling, reverted table contraint

dist/table/table.css

@@ -1,5 +1,4 @@
 .table {
-    max-height: 90vh;
     overflow-x: auto;
     position: relative;
     -webkit-overflow-scrolling: touch;
@@ -30,7 +29,7 @@
 }
 
 .table table {
-    border-collapse: collapse;
+    border-collapse: initial;
     border-spacing: 0;
     width: 100%;
 }
@@ -85,6 +84,10 @@
     max-height: unset;
 }
 
+.table--constrained-height {
+    max-height: 90vh;
+}
+
 .table th a,
 .table th button {
     align-items: center;

src/modules/table.marko

@@ -1242,17 +1242,14 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
 </div>
     </highlight-code>
 
-    <h3>Full Height Table</h3>
+    <h3>Table with Constrained Height</h3>
     <p>
-        By default a table takes up only a portion of the viewport height to allow for easier scrolling, especially on smaller screens where a table could potentially take up the entire screen and force users to scroll the table before being able to scroll the page body. Also, with a preferred number of rows adjustable by the user, the table could grow in height and make it even more difficult for users to navigate and explore the page. The default experience is highly recommended.
-    </p>
-    <p>
-        However, in the rare instance an exception is needed, you can make tables full height by adding the <span class="highlight">table--full-height</span> modifier class to module. That will display the full table without any max-height restrictons.
+        You may constrain the height of the table, which will constrain the table to a percentage of the viewport height as opposed to allowing the full table contents to be fully visible. This is typically used in a table with a frozen header. To do so, add a <span class="highlight">table--constrained-height</span> modifier class to module.
     </p>
 
     <div class="demo">
         <div class="demo__inner">
-            <div class="table table--frozen-header table--full-height" role="group" aria-label="Video games for sale" tabindex="0">
+            <div class="table table--frozen-header table--constrained-height" role="group" aria-label="Video games for sale" tabindex="0">
                 <table>
                     <thead>
                         <tr>
@@ -1443,7 +1440,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
     </div>
 
     <highlight-code type="html">
-<div class="table table--frozen-header table--full-height" role="group" aria-label="Video games for sale" tabindex="0">
+<div class="table table--frozen-header table--constrained-height" role="group" aria-label="Video games for sale" tabindex="0">
     <table>
         <thead>
             <tr>

src/sass/table/table.scss

@@ -22,15 +22,14 @@ $density-default-img-radius: 8px;
 $density-relaxed-img-radius: 8px;
 
 .table {
-    max-height: 90vh;
     overflow-x: auto;
     position: relative;
 }
 
 @include scrollbars-permanent(".table");
 
 .table table {
-    border-collapse: collapse;
+    border-collapse: separate;
     border-spacing: 0;
     width: 100%;
 }
@@ -96,6 +95,10 @@ $density-relaxed-img-radius: 8px;
     max-height: unset;
 }
 
+.table--constrained-height {
+    max-height: 90vh;
+}
+
 .table th button,
 .table th a {
     align-items: center;