diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.js
index 1bf6d07..5d0907e 100644
--- a/core/misc/tableresponsive.js
+++ b/core/misc/tableresponsive.js
@@ -44,6 +44,7 @@
     // Attach a resize handler to the window.
     $(window)
       .on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility'))
+      .on('resize.tableresponsive', $.proxy(this, 'eventhandlerCollapseColumns'))
       .trigger('resize.tableresponsive');
   }
 
@@ -61,6 +62,15 @@
    * or priority-medium.
    */
   $.extend(TableResponsive.prototype, {
+    eventhandlerCollapseColumns: function (e) {
+      var $table = this.$table;
+      var $parent = $table.parent();
+      var parentWidth = $parent.width();
+      var tableWidth = $table.width();
+      if (parentWidth <= tableWidth) {
+        $table.addClass('is-collapsed');
+      }
+    },
     eventhandlerEvaluateColumnVisibility: function (e) {
       var pegged = parseInt(this.$link.data('pegged'), 10);
       var hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
diff --git a/core/modules/system/templates/table.html.twig b/core/modules/system/templates/table.html.twig
index 64c7e75..8d81b0b 100644
--- a/core/modules/system/templates/table.html.twig
+++ b/core/modules/system/templates/table.html.twig
@@ -30,7 +30,7 @@
  *     - content: The string to display in the table cell.
  *     - active_table_sort: A boolean indicating whether the cell is the active
          table sort.
-       - label: @todo
+       - label: The value of the related table header of this column.
  * - footer: Table footer rows, in the same format as the rows variable.
  * - empty: The message to display in an extra row if table does not have
  *   any rows.
@@ -42,7 +42,7 @@
  * @ingroup themeable
  */
 #}
-<table{{ attributes.addClass('mobile-table') }}>
+<table{{ attributes }}>
   {% if caption %}
     <caption>{{ caption }}</caption>
   {% endif %}
diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig
index ec75497..6907b1f 100644
--- a/core/modules/views/templates/views-view-table.html.twig
+++ b/core/modules/views/templates/views-view-table.html.twig
@@ -20,7 +20,7 @@
  *   - columns: Row column items. Columns are keyed by column number.
  *     - attributes: HTML classes to apply to each column.
  *     - content: The column content.
- *     - label: @todo
+ *     - label: The value of the related table header of this column.
  *
  * @see template_preprocess_views_view_table()
  *
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index c0f64ee..f067935 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -180,23 +180,19 @@ table.system-status-report tr.error {
   td.priority-low {
     display: none;
   }
-
-  table.mobile-table {
+  .responsive-enabled.is-collapsed {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
   }
-
-  table.mobile-table th {
+  .responsive-enabled.is-collapsed th {
     display: none;
   }
-
-  table.mobile-table td {
+  .responsive-enabled.is-collapsed td {
     display: block;
     border: none !important;
   }
-
-  table.mobile-table td:before {
+  .responsive-enabled.is-collapsed td:before {
     content: attr(data-th)" ";
     font-weight: bold;
     width: 8em;