diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.css b/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
index 389375d301..89be394328 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
@@ -83,6 +83,10 @@
       }
     }
   }
+
+  &__mobile-label {
+    display: none;
+  }
 }
 
 .rpl-data-table--mobile {
@@ -151,9 +155,8 @@
     }
   }
 
-  [data-label]::before {
+  .rpl-data-table__mobile-label {
     font-weight: var(--rpl-type-weight-bold);
-    content: attr(data-label);
     display: block;
     margin-bottom: var(--rpl-sp-1);
   }
@@ -165,10 +168,6 @@
       font-size: var(--rpl-type-size-2);
       line-height: var(--rpl-type-lh-4);
       letter-spacing: var(--rpl-type-ls-1);
-
-      &[data-label]::before {
-        content: '';
-      }
     }
   }
 }
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
index 812ee7d09c..4efee71f3f 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -116,6 +116,7 @@ const getCellText = (col?: number | string, value = '') => {
         :key="i"
         :data-label="column.label"
       >
+        <div class="rpl-data-table__mobile-label" v-html="column.label" />
         <template v-if="hasComponent(column)">
           <component
             :is="(column as tableColumnConfig).component"