普通弹出框table表单样式和form表单常见样式：一行两个

第一部分：表单样式

 vue中弹出框table表单样式

<template>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
        <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
        <span>
            <table class="pure-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Make</th>
                        <th>Model</th>
                        <th>Year</th>
                        <th>Year</th>
                        <th>Year</th>
                        <th>Year</th>
                        <th>Year</th>
                        <th>Year</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Honda</td>
                        <td>Accord</td>
                        <td>2009</td>
                        <td>2009</td>
                        <td>2009</td>
                        <td>2009</td>
                        <td>2009</td>
                        <td>2009</td>
                    </tr>
                </tbody>
            </table>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false
        };
    },
    methods: {
        handleClose(done) {
            done();
        }
    }
};
</script>

<style scoped>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

td,
th {
    padding: 0;
}

.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 0.5em 1em;
}
span {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
</style>

第二部分：colgroup

<table>
	<colgroup style="width: 100px;background-color: red;"></colgroup>
	<colgroup style="width: 200px;background-color: green;"></colgroup>
	<tr>
		<td>王小波</td>
		<td>李银河</td>
	</tr>
	<tr>
		<td>钱钟书</td>
		<td>杨绛</td>
	</tr>
	<tr>
		<td>梁思成</td>
		<td>林徽因</td>
	</tr>
</table>

//或者写成
    <colgroup>
        <col width="50%" />
        <col width="50%" />
    </colgroup>

效果如下：

 第三部分：form表单常见样式：一行两个

<template>
  <!-- 设置盒子缩放最小值 -->
  <div style="min-width:600px">
    <!-- 审批项目：环境处罚 -->
    <el-form
      label-position="right"
      label-width="110px"
      :inline="true"
      :model="formInline"
      class="demo-formData form-part-2"
    >
      <el-form-item label="服务名称">
        <el-input v-model="formInline.fwmc" placeholder="服务名称"></el-input>
      </el-form-item>
      <el-form-item label="主题分类">
        <el-input v-model="formInline.ztfl" placeholder="主题分类"></el-input>
      </el-form-item>
      <el-form-item label="所属部门">
        <el-input v-model="formInline.ssbm" placeholder="所属部门"></el-input>
      </el-form-item>
      <el-form-item label="更新周期">
        <el-input v-model="formInline.gxzq" placeholder="更新周期"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="formInline.lxr" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="formInline.lxfs" placeholder="联系方式"></el-input>
      </el-form-item>
      <el-form-item label="版本号">
        <el-input v-model="formInline.bbh" placeholder="版本号"></el-input>
      </el-form-item>
      <el-form-item label="公开范围">
        <el-input v-model="formInline.gkfw" placeholder="公开范围"></el-input>
      </el-form-item>
      <el-form-item label="单个令牌单日运行调用次数">
        <el-input v-model="formInline.dycs" placeholder="单个令牌单日运行调用次数"></el-input>
      </el-form-item>
      <el-form-item label="最小时间间隔">
        <el-input v-model="formInline.zxsj" placeholder="最小时间间隔（秒）"></el-input>
      </el-form-item>
      <el-form-item label="推送策略">
        <el-input v-model="formInline.tscl" placeholder="推送策略"></el-input>
      </el-form-item>
      <el-form-item label="排序号">
        <el-input v-model="formInline.pxh" placeholder="排序号"></el-input>
      </el-form-item>
      <el-form-item label="服务简介" style="width:97%">
        <el-input v-model="formInline.fwjj" placeholder="服务简介"></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item> -->
    </el-form>

  </div>
</template>

<script>
export default {
  props: {
    // columns: Array,
  },
  data() {
    return {
      formInline: {
      }
    }
  },
  mounted() {
    console.log('modular', this.modular)
    // xh字段和xtxh字段都在这里
  }
}
</script>

<style scoped>
/* 表单 一行两个 */
.form-part-2{
    display: flex;
    flex-wrap: wrap;
}

.form-part-2 .el-form-item {
    width: 48%;
}
.form-part-2 .el-form-item__content > div{
    width: 100%;
}
::v-deep .el-form-item{
    display: flex;
}
::v-deep .el-form-item__content{
    flex:1
}
::v-deep .el-input {
        width: flex;
      }
::v-deep .el-form-item label{
    color:#fff
}
</style>