给table的td设置了 colspan排版依然乱解决方案

需要效果如图

使用colspan的属性进行排版但设置完后变成这样达不到效果

查资料后发现得更改table的布局为table-layout: fixed;，td也可以设置需要的宽度，设置后达到效果，代码如下

<el-dialog title="预览" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="70%">
    <div id="printTest1">
        <div style="width: 90%;height: 80px;margin: 10px auto auto !important;" v-if="dialogFormVisible">
            <OrderBarcode style="float:right;" :content='form.orderNo'/>
        </div>
        <table border= "0" width="90%"  style="margin: 10px auto auto auto!important;">
        	<thead>
                <tr>
                    <th colspan="14" id="title">检测任务单</th>
                </tr>
            </thead>
            <tr style="height:80px">
                <td colspan="14">订单号：{{form.orderNo}}<br>
                    创建时间：{{new Date() | formatFullDate}}
                </td>
            </tr>
            <tbody>
                <tr>
                    <td colspan="14">客户信息</td>
                </tr>
                <tr>
                    <td colspan="2">委托单位</td>
                    <td colspan="5">{{form.applicantCompany}}</td>
                    <td colspan="1">联系人</td>
                    <td colspan="2">{{form.applicantName}}</td>
                    <td colspan="1">电话</td>
                    <td colspan="3">{{form.applicantTel}}</td>
                </tr>
                <tr>
                    <td colspan="2">委托地址</td>
                    <td colspan="5">{{form.applicantAddress}}</td>
                    <td colspan="1">邮箱</td>
                    <td colspan="6">{{form.applicantEmail}}</td>
                </tr>
                <tr>
                    <td colspan="2">缴费单位</td>
                    <td colspan="5">{{form.payerCompany}}</td>
                    <td colspan="1">联系人</td>
                    <td colspan="2">{{form.payerName}}</td>
                    <td colspan="1">电话</td>
                    <td colspan="3">{{form.payerTel}}</td>
                </tr>
                <tr>
                    <td colspan="2">缴费地址</td>
                    <td colspan="5">{{form.payerAddress}}</td>
                    <td colspan="1">邮箱</td>
                    <td colspan="6">{{form.payerEmail}}</td>
                </tr>
            </tbody>
        </table>

        <table border= "0" width="70%"  style="margin: 10px auto auto auto!important;">
            <tbody>
                <tr style="height:40px">
                    <td colspan="10">样品信息</td>
                </tr>
                <tr style="height:40px">
                    <td colspan="2">样品名称</td>
                    <td colspan="3">{{form.sampleDescription}}</td>
                    <td colspan="2">样品数量</td>
                    <td colspan="3">{{form.quantity + form.quantityUnit}}</td>
                </tr>
                <tr style="height:40px">
                    <td colspan="2">商标</td>
                    <td colspan="3">{{form.brandName}}</td>
                    <td colspan="2">款号</td>
                    <td colspan="3">{{form.lotNo}}</td>
                </tr>
            </tbody>
        </table>
     </div>
     <span slot="footer" class="dialog-footer">
         <el-button  type="primary" @click="onSubmit('again')" size="mini">再次下单</el-button>
         <el-button  type="primary" @click="onSubmit('confirm')" size="mini">确认</el-button>
         <el-button  @click="dialogFormVisible = false" size="mini">修改</el-button>
     </span>
</el-dialog>

<style scoped>

/* 表格样式 */

#printTest1 #title{
  padding-top:50px!important;
  padding-bottom: 30px!important;
}
#printTest1{
  width: 80%;
  margin: auto;
  border: 2px solid black;
  padding-bottom: 30px!important;
}
#printTest1 table{
  table-layout: fixed; /*加了td的colspan才有效 */
  border-collapse:collapse;
}
#printTest1 table thead th{
  font-size: 20px;
  padding:10px;
}
#printTest1 table tbody tr{
  height:40px;
  font-size:14px;
}
#printTest1 table tbody td{
  width: 5%;
  border: 1px solid black;
  text-align: left!important;
  padding-left: 5px;
}
</style>