我写死的width属性没实现，是因为v-if的原因吗？

Question

问题描述

我给他定死了宽度，但是没按照我设置的属性来进行渲染的，我加了个v-if，是不是这样就导致渲染不了呢？？

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="customer_cost_table">
    <tr class="ivu-table-small">
        <th>市场</th>
        <th >买卖类别</th>
        <th>交易类型</th>
        <th>证券类别</th>
        <th>数量</th>
        <th>价格</th>
        <th>笔数</th>

        <th width="300px" v-if="hide">产品名称</th>
        <th width="80px"  v-if="hide">价格</th>
        <th width="80px"  v-if="hide">费率</th>
        <th width="80px"  v-if="hide">折扣</th>
        <th width="120px"  v-if="hide">附加费</th>
        <th width="80px"  v-if="hide">金额</th>
    </tr>
    <tr ref="tableInfo" v-for="(item,index) in items" :id="index">
        <td><i-combox dict="ESC" v-model="item.marKey" valuefield="marKey" textfield="marKey_text" style="width: 100px"></i-combox></td>
        <td><i-combox dict="EMMLB" v-model="item.bsFlag" valuefield="bsFlag" textfield="bsFlag_text" style="width: 100px"></i-combox></td>
        <td><i-combox dict="EJYLX" v-model="item.trdId" valuefield="trdId" textfield="trdId_text" style="width: 100px"></i-combox></td>
        <td><i-combox dict="EZQLB" v-model="item.stkType" valuefield="stkType" textfield="stkType_text" style="width: 100px"></i-combox></td>
        <td><i-input v-model="item.price" size="small" placeholder="请输入"/></td>
        <td><i-input v-model="item.qty" size="small" placeholder="请输入"/></td>
        <td><i-input v-model="item.count" size="small" placeholder="请输入"/></td>

        <td class="green_bg4" v-if="postInfo.length==0 ? false : true">{{postInfo[index].prodName}}</td>
        <td class="green_bg4" v-if="postInfo.length==0 ? false : true">{{postInfo[index].priceName}}</td>
        <td class="green_bg4" v-if="postInfo.length==0 ? false : true">{{postInfo[index].feeRate}}</td>
        <td class="green_bg4" v-if="postInfo.length==0 ? false : true">{{postInfo[index].discount}}</td>
        <td class="green_bg4" v-if="postInfo.length==0 ? false : true">{{postInfo[index].feeAmt}}</td>
        <td class="green_bg4" v-if="postInfo.length==0 ? false : true">{{postInfo[index].amt}}</td>
    </tr>
    <tr>
        <td colspan="14" align="right" v-if="hide">汇总：<span class="color_red">{{total}}</span></td>
    </tr>
</table>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

.customer_cost_table {
    table-layout: fixed;
}

Answer 2

表格单元格的宽度会收表格宽度，单元格内容等影响，并不是你设置了300就是300，有时候表格本身才300宽度，他就会按你设置的比例去缩放，如果你要强制单元格按你设置的宽度就需要增加：table-layout: fixed;