diff --git a/docs/product/components/tables.html b/docs/product/components/tables.html
index b812ebe0ef..5f39a78d7f 100644
--- a/docs/product/components/tables.html
+++ b/docs/product/components/tables.html
@@ -642,11 +642,25 @@
     <table class="s-table s-table__sortable">
         <thead>
             <tr>
-                <th scope="col" class="is-sorted">Listing @Svg.ArrowDownSm</th>
-                <th scope="col">Status @Svg.ArrowUpDownSm</th>
-                <th scope="col">Owner @Svg.ArrowUpDownSm</th>
-                <th scope="col" class="ta-right">Views @Svg.ArrowUpDownSm</th>
-                <th scope="col" class="ta-right">Applies @Svg.ArrowUpDownSm</th>
+                <th scope="col" class="is-sorted">
+                    <button type="button">Listing @Svg.ArrowDownSm</button>
+                </th>
+                <th scope="col">
+                    <button type="button">Status @Svg.ArrowUpDownSm</button>
+
+                </th>
+                <th scope="col">
+                    <button type="button">Owner @Svg.ArrowUpDownSm</button>
+
+                </th>
+                <th scope="col" class="ta-right">
+                    <button type="button">Views @Svg.ArrowUpDownSm</button>
+
+                </th>
+                <th scope="col" class="ta-right">
+                    <button type="button">Applies @Svg.ArrowUpDownSm</button>
+
+                </th>
             </tr>
         </thead>
         <tbody>
@@ -661,24 +675,19 @@
                     <thead>
                         <tr>
                             <th scope="col" class="is-sorted">
-                                Listing
-                                {% icon "ArrowDownSm" %}
+                                <a href="#sortable-tables">Listing {% icon "ArrowDownSm" %}</a>
                             </th>
                             <th scope="col">
-                                Status
-                                {% icon "ArrowUpDownSm" %}
+                                <a href="#sortable-tables">Status {% icon "ArrowUpDownSm" %}</a>
                             </th>
                             <th scope="col">
-                                Owner
-                                {% icon "ArrowUpDownSm" %}
+                                <button type="button">Owner {% icon "ArrowUpDownSm" %}</button>
                             </th>
                             <th scope="col" class="ta-right">
-                                Views
-                                {% icon "ArrowUpDownSm" %}
+                                <button type="button">Views {% icon "ArrowUpDownSm" %}</button>
                             </th>
                             <th scope="col" class="ta-right">
-                                Applies
-                                {% icon "ArrowUpDownSm" %}
+                                <button type="button">Applies {% icon "ArrowUpDownSm" %}</button>
                             </th>
                         </tr>
                     </thead>
diff --git a/lib/components/table/table.less b/lib/components/table/table.less
index dadbd4ad62..3a1f42b1b8 100644
--- a/lib/components/table/table.less
+++ b/lib/components/table/table.less
@@ -124,7 +124,9 @@
         thead th {
             a,
             button { //  If an anchor is used, it should appear like a normal header
-                color: inherit;
+                // `!important` is used to ensure the appropriate color is on visited links. See STACKS-658.
+                // https://stackoverflow.atlassian.net/browse/STACKS-658
+                color: inherit !important;
             }
 
             button {