diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index e772289..4dc491a 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1245,6 +1245,7 @@ function template_preprocess_table(&$variables) {
       if (!is_array($cell)) {
         $header_columns++;
         $cell_content = $cell;
+        $cell_label = $cell;
         $cell_attributes = new Attribute();
         $is_header = TRUE;
       }
@@ -1258,6 +1259,7 @@ function template_preprocess_table(&$variables) {
         $cell_content = '';
         if (isset($cell['data'])) {
           $cell_content = $cell['data'];
+          $cell_label = $cell['data'];
           unset($cell['data']);
         }
         // Flag the cell as a header or not and remove the flag.
@@ -1290,6 +1292,7 @@ function template_preprocess_table(&$variables) {
       $variables['header'][$col_key]['tag'] = $is_header ? 'th' : 'td';
       $variables['header'][$col_key]['attributes'] = $cell_attributes;
       $variables['header'][$col_key]['content'] = $cell_content;
+      $variables['header'][$col_key]['label'] = $cell_label;
     }
   }
   $variables['header_columns'] = $header_columns;
@@ -1358,6 +1361,9 @@ function template_preprocess_table(&$variables) {
             $variables[$section][$row_key]['cells'][$col_key]['tag'] = $is_header ? 'th' : 'td';
             $variables[$section][$row_key]['cells'][$col_key]['attributes'] = new Attribute($cell_attributes);
             $variables[$section][$row_key]['cells'][$col_key]['content'] = $cell_content;
+            if (!empty($variables['header'][$col_key]['label'])) {
+              $variables[$section][$row_key]['cells'][$col_key]['label'] = $variables['header'][$col_key]['label'];
+            }
           }
         }
       }
diff --git a/core/modules/system/templates/table.html.twig b/core/modules/system/templates/table.html.twig
index 3d0252e..64c7e75 100644
--- a/core/modules/system/templates/table.html.twig
+++ b/core/modules/system/templates/table.html.twig
@@ -30,6 +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
  * - 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.
@@ -41,7 +42,7 @@
  * @ingroup themeable
  */
 #}
-<table{{ attributes }}>
+<table{{ attributes.addClass('mobile-table') }}>
   {% if caption %}
     <caption>{{ caption }}</caption>
   {% endif %}
@@ -85,7 +86,7 @@
         %}
         <tr{{ row.attributes.addClass(row_classes) }}>
           {% for cell in row.cells %}
-            <{{ cell.tag }}{{ cell.attributes }}>
+            <{{ cell.tag }}{{ cell.attributes }} data-th="{{ cell.label }}">
               {{- cell.content -}}
             </{{ cell.tag }}>
           {% endfor %}
@@ -104,7 +105,7 @@
       {% for row in footer %}
         <tr{{ row.attributes }}>
           {% for cell in row.cells %}
-            <{{ cell.tag }}{{ cell.attributes }}>
+            <{{ cell.tag }}{{ cell.attributes }} data-th="{{ cell.label }}">
               {{- cell.content -}}
             </{{ cell.tag }}>
           {% endfor %}
diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig
index 6b0b26c..ec75497 100644
--- a/core/modules/views/templates/views-view-table.html.twig
+++ b/core/modules/views/templates/views-view-table.html.twig
@@ -20,6 +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
  *
  * @see template_preprocess_views_view_table()
  *
@@ -61,7 +62,7 @@
     {% for row in rows %}
       <tr{{ row.attributes }}>
         {% for column in row.columns %}
-          <td{{ column.attributes }}>
+          <td{{ column.attributes }} data-th="{{ column.label }}">
             {{ column.content }}
           </td>
         {% endfor %}
diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index ebef6f8..05967eb 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -544,6 +544,11 @@ function template_preprocess_views_view_table(&$variables) {
         $column_reference['attributes']['class'][] = 'views-field-' . $variables['fields'][$field];
       }
 
+      if (!empty($label)) {
+        $data_th = String::checkPlain(!empty($fields[$field]) ? $fields[$field]->label() : '');
+        $column_reference['label'] = $data_th;
+      }
+
       if ($classes = $fields[$field]->elementClasses($num)) {
         $column_reference['attributes']['class'][] = $classes;
       }
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 524c83b..5b842f0 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -152,6 +152,28 @@ table.system-status-report tr.error {
   td.priority-medium {
     display: none;
   }
+
+  table.mobile-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+
+  table.mobile-table th {
+    display: none;
+  }
+
+  table.mobile-table td {
+    display: block;
+    border: none !important;
+  }
+
+  table.mobile-table td:before {
+    content: attr(data-th)" ";
+    font-weight: bold;
+    width: 8em;
+    display: inline-block;
+  }
 }
 @media screen and (max-width: 60em) { /* 920px */
   th.priority-low,
@@ -159,3 +181,4 @@ table.system-status-report tr.error {
     display: none;
   }
 }
+