diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index e02bb43e9..6f845de0a 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -663,7 +663,8 @@
   background-color: rgba(0,0,0,.1);
   z-index: 100;
 }*/
-.chart-table .nz-table .el-table__row .costom-value .cell{
-  padding: 1px 0;
-
+.chart-table ,.chart-preview-dialog {
+  .nz-table .el-table__row .costom-value .cell{
+    padding: 1px 0;
+  }
 }
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 6fd22dbf6..a86b36949 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -141,9 +141,11 @@
               {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
             </template>
           </el-table-column>
-          <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
+          <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90" class-name="costom-value">
             <template slot-scope="scope">
-              <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
+              <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}">
+                <span style="padding: 0px 10px;">{{ scope.row.value}}</span>
+              </div>
             </template>
           </el-table-column>
         </el-table>