tr标签设置block布局错乱问题

<table>
    <tr>
        <td><label>请选择商品：</label></td>
        <td>
            <select id="selectGoods4" class="easyui-combobox" panelHeight="auto" style="width:150px"
                    data-options="valueField:'id',textField:'name',url:'/goods/getAllGoodsWithIdAndName',onSelect: function(rec){
            showSOSelect(rec);
            }">
            </select>
        </td>
    </tr>
    <tr>
        <td><label>录入数量：</label></td>
        <td><input id="inputGoodsNum4" class="easyui-numberbox" data-options="min:0" style="width:150px"></td>
    </tr>
    <tr style="display: none;" id="trArr1">
        <td><label id="lableNameArr1">规格名：</label></td>
        <td>
            <select id="selectSpecOptionArr1" class="easyui-combobox" panelHeight="auto" style="width:150px"
                    data-options="valueField:'soId',textField:'soName'">
            </select>
        </td>
    </tr>
</table>

在通过JS代码

$("#trArr1").css('display','block');//block是display的默认值

设置trArr1显示时table的布局乱了，界面如下：

trArr1显示的宽度变成了第一行第一列的宽度，查阅资料，在设置tr需要设置成“table-row”，修改代码如下：

$("#trArr1").css('display','table-row');//block是display的默认值

界面正常显示：