幢单元前端表单样式提交

 <template>
     <div class="zdy-content">
         <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="small">
-            <el-row :gutter="24">
-                <el-col :span="12">
-                    <el-form-item label="幢单元号" prop="zdyh">
+
+            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
+                <tbody>
+                <tr height="30">
+                    <td colspan="12" align="center"  ><font size="4">幢单元基本信息</font></td>
+                </tr>
+                <tr height="30">
+                    <td  colspan="2" align="center"  >幢单元号</td>
+                    <td  colspan="4"  >
                         <el-input v-model="form.zdyh"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item label="项目名称" prop="zdymc">
+                    </td>
+                    <td  colspan="2" align="center"  >幢单元名称</td>
+                    <td  colspan="4"  >
                         <el-input v-model="form.zdymc"></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <el-row :gutter="24">
-                <el-col :span="12">
-                    <el-form-item label="地上层数" prop="dscs">
-                        <el-input v-model.number="form.dscs" type="number"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item label="地下层数" prop="dxcs">
-                        <el-input v-model.number="form.dxcs" type="number"></el-input>
-                    </el-form-item>
-
-                </el-col>
-            </el-row>
-
-
-            <el-row :gutter="24">
-                <el-col :span="12">
-                    <el-form-item label="总层数" prop="zcs">
-                        <el-input v-model.number="form.zcs" type="number"></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <el-row :gutter="24">
-                <el-col :span="24">
-                    <el-form-item label="备注">
+                    </td>
+                </tr>
+                <tr height="30">
+                    <td  colspan="2" align="center"  >地上层数</td>
+                    <td  colspan="4"  >
+                        <el-input v-model="form.dscs"></el-input>
+                    </td>
+                    <td  colspan="2" align="center"  >地下层数</td>
+                    <td  colspan="4"  >
+                        <el-input v-model="form.dxcs"></el-input>
+                    </td>
+                </tr>
+                <tr height="30">
+                    <td  colspan="2" align="center"  >总层数</td>
+                    <td  colspan="4"  >
+                        <el-input v-model="form.zcs"></el-input>
+                    </td>
+                    <td  colspan="2" align="center"  >备注</td>
+                    <td  colspan="4"  >
                         <el-input v-model="form.bz"></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
 
             <el-row :gutter="24">
                 <el-col :span="24">
-                    <el-form-item>
                     <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
-                    </el-form-item>
                 </el-col>
             </el-row>
 
@@ -114,6 +107,12 @@
 
     /deep/.el-input__inner{
         width: 100%;
+        border:0;
+    }
+
+    table{
+        background: #fff;
+        table-layout: fixed;
     }
 
 </style>
\ No newline at end of file