diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index 61f6c991bf..04fd337094 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -251,4 +251,8 @@
     cursor:pointer;
   }
 
+  pre {
+    margin: 0 0;
+  }
+
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 986d973a9f..1448631e22 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -137,29 +137,29 @@
               <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="35%">
                 <template v-slot:default="scope">
                   <el-input
+                    class="table-edit-input"
                     size="mini"
-                    v-if="!readOnly"
+                    :disabled="readOnly"
                     type="textarea"
                     :autosize="{ minRows: 2, maxRows: 4}"
                     :rows="2"
                     v-model="scope.row.desc"
                     :placeholder="$t('commons.input_content')"
-                    clearable></el-input>
-                  <pre>{{scope.row.desc}}</pre>
+                    clearable/>
                 </template>
               </el-table-column>
               <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="35%">
                 <template v-slot:default="scope">
                   <el-input
+                    class="table-edit-input"
                     size="mini"
-                    v-if="!readOnly"
+                    :disabled="readOnly"
                     type="textarea"
                     :autosize="{ minRows: 2, maxRows: 4}"
                     :rows="2"
                     v-model="scope.row.result"
                     :placeholder="$t('commons.input_content')"
-                    clearable></el-input>
-                  <pre>{{scope.row.result}}</pre>
+                    clearable/>
                 </template>
               </el-table-column>
               <el-table-column :label="$t('commons.input_content')" min-width="15%">
@@ -506,18 +506,6 @@
 
 <style scoped>
 
-  .tb-edit .el-textarea {
-    display: none;
-  }
-
-  .tb-edit .current-row .el-textarea {
-    display: block;
-  }
-
-  .tb-edit .current-row .el-textarea + pre {
-    display: none;
-  }
-
   .el-switch {
     margin-bottom: 10px;
   }
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
index 6cfa70f8fc..26740080d2 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
@@ -128,17 +128,30 @@
 
                   <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="21%">
                     <template v-slot:default="scope">
-                      <pre>{{scope.row.desc}}</pre>
+                      <el-input
+                        size="mini"
+                        class="border-hidden"
+                        type="textarea"
+                        :autosize="{ minRows: 1, maxRows: 4}"
+                        :disabled="true"
+                        v-model="scope.row.desc"/>
                     </template>
                   </el-table-column>
                   <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="21%">
                     <template v-slot:default="scope">
-                      <pre>{{scope.row.result}}</pre>
+                      <el-input
+                        size="mini"
+                        class="border-hidden"
+                        type="textarea"
+                        :autosize="{ minRows: 1, maxRows: 4}"
+                        :disabled="true"
+                        v-model="scope.row.result"/>
                     </template>
                   </el-table-column>
                   <el-table-column :label="$t('test_track.plan_view.actual_result')" min-width="21%">
                     <template v-slot:default="scope">
                       <el-input
+                        class="table-edit-input"
                         size="mini"
                         type="textarea"
                         :autosize="{ minRows: 2, maxRows: 4}"
@@ -146,8 +159,7 @@
                         :disabled="isReadOnly"
                         v-model="scope.row.actualResult"
                         :placeholder="$t('commons.input_content')"
-                        clearable></el-input>
-                      <pre>{{scope.row.actualResult}}</pre>
+                        clearable/>
                     </template>
                   </el-table-column>
                   <el-table-column :label="$t('test_track.plan_view.step_result')" min-width="12%">
@@ -446,17 +458,10 @@
 
 <style scoped>
 
-
-  .tb-edit .el-textarea {
-    display: none;
-  }
-
-  .tb-edit .current-row .el-textarea {
-    display: block;
-  }
-
-  .tb-edit .current-row .el-textarea + pre {
-    display: none;
+  .border-hidden >>> .el-textarea__inner {
+    border-style: hidden;
+    background-color: white;
+    color: #606266;
   }
 
   .cast_label {
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
index 68d04233f2..4b5db2de38 100644
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@@ -75,3 +75,22 @@ body {
   background-color: #EBEEF5;
 }
 /* 表格拖拽表头调整宽度 --> */
+
+/* <-- 表格 input 编辑效果*/
+.table-edit-input .el-textarea__inner {
+  border-style: hidden;
+}
+.table-edit-input.is-disabled .el-textarea__inner {
+  background-color: white;
+  color: #606266;
+}
+
+.el-table .current-row .table-edit-input {
+  border: 1px solid #DCDFE6;
+  border-radius: 5px;
+}
+
+.table-edit-input .el-textarea__inner:focus {
+  border: 1px solid #409EFF;
+}
+/* 表格 input 编辑效果 --> */