diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index 39e741420a..1f3e6dafb6 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -449,9 +449,6 @@ function template_preprocess_views_view_table(&$variables) {
     // Create a second variable so we can easily find what fields we have and
     // what the CSS classes should be.
     $variables['fields'][$field] = Html::cleanCssIdentifier($field);
-    if ($active == $field) {
-      $variables['fields'][$field] .= ' is-active';
-    }
 
     // Render the header labels.
     if ($field == $column && empty($fields[$field]->options['exclude'])) {
@@ -487,19 +484,21 @@ function template_preprocess_views_view_table(&$variables) {
 
       $variables['header'][$field]['default_classes'] = $fields[$field]->options['element_default_classes'];
       // Set up the header label class.
-      $variables['header'][$field]['attributes'] = [];
-      $class = $fields[$field]->elementLabelClasses(0);
-      if ($class) {
-        $variables['header'][$field]['attributes']['class'][] = $class;
+      $variables['header'][$field]['attributes'] = new Attribute();
+      if ($class = $fields[$field]->elementLabelClasses(0)) {
+        $variables['header'][$field]['attributes']->addClass($class);
+      }
+      if ($active == $field) {
+        $variables['header'][$field]['attributes']->addClass('is-active');
       }
       // Add responsive header classes.
       if (!empty($options['info'][$field]['responsive'])) {
-        $variables['header'][$field]['attributes']['class'][] = $options['info'][$field]['responsive'];
+        $variables['header'][$field]['attributes']->addClass($options['info'][$field]['responsive']);
         $responsive = TRUE;
       }
       // Add a CSS align class to each field if one was set.
       if (!empty($options['info'][$field]['align'])) {
-        $variables['header'][$field]['attributes']['class'][] = Html::cleanCssIdentifier($options['info'][$field]['align']);
+        $variables['header'][$field]['attributes']->addClass(Html::cleanCssIdentifier($options['info'][$field]['align']));
       }
       // Add a header label wrapper if one was selected.
       if ($variables['header'][$field]['content']) {
@@ -514,13 +513,6 @@ function template_preprocess_views_view_table(&$variables) {
       if (!empty($variables['header'][$field]['content'])) {
         $has_header_labels = TRUE;
       }
-
-      $variables['header'][$field]['attributes'] = new Attribute($variables['header'][$field]['attributes']);
-    }
-
-    // Add a CSS align class to each field if one was set.
-    if (!empty($options['info'][$field]['align'])) {
-      $variables['fields'][$field] .= ' ' . Html::cleanCssIdentifier($options['info'][$field]['align']);
     }
 
     // Render each field into its appropriate column.
@@ -543,16 +535,25 @@ function template_preprocess_views_view_table(&$variables) {
 
       // Add field classes.
       if (!isset($column_reference['attributes'])) {
-        $column_reference['attributes'] = [];
+        $column_reference['attributes'] = new Attribute();
       }
 
       if ($classes = $fields[$field]->elementClasses($num)) {
-        $column_reference['attributes']['class'][] = $classes;
+        $column_reference['attributes']->addClass($classes);
+      }
+
+      if ($active == $field) {
+        $column_reference['attributes']->addClass('is-active');
+      }
+
+      // Add a CSS align class to each field if one was set.
+      if (!empty($options['info'][$field]['align'])) {
+        $column_reference['attributes']->addClass(Html::cleanCssIdentifier($options['info'][$field]['align']));
       }
 
       // Add responsive header classes.
       if (!empty($options['info'][$field]['responsive'])) {
-        $column_reference['attributes']['class'][] = $options['info'][$field]['responsive'];
+        $column_reference['attributes']->addClass($options['info'][$field]['responsive']);
       }
 
       // Improves accessibility of complex tables.
@@ -583,7 +584,6 @@ function template_preprocess_views_view_table(&$variables) {
           }
         }
       }
-      $column_reference['attributes'] = new Attribute($column_reference['attributes']);
     }
 
     // Remove columns if the "empty_column" option is checked and the
diff --git a/core/modules/views_ui/src/Tests/PreviewTest.php b/core/modules/views_ui/src/Tests/PreviewTest.php
index c723cb3b76..d56934902f 100644
--- a/core/modules/views_ui/src/Tests/PreviewTest.php
+++ b/core/modules/views_ui/src/Tests/PreviewTest.php
@@ -281,7 +281,7 @@ public function testPreviewSortLink() {
     $this->getPreviewAJAX('test_click_sort', 'page_1', 0);
 
     // Test that the header label is present.
-    $elements = $this->xpath('//th[contains(@class, :class)]/a', [':class' => 'views-field views-field-name']);
+    $elements = $this->cssSelect('th.views-field.views-field-name a');
     $this->assertTrue(!empty($elements), 'The header label is present.');
 
     // Verify link.
@@ -291,7 +291,7 @@ public function testPreviewSortLink() {
     $this->clickPreviewLinkAJAX($elements[0]['href'], 0);
 
     // Test that the header label is present.
-    $elements = $this->xpath('//th[contains(@class, :class)]/a', [':class' => 'views-field views-field-name is-active']);
+    $elements = $this->cssSelect('th.is-active.views-field.views-field-name a');
     $this->assertTrue(!empty($elements), 'The header label is present.');
 
     // Verify link.