Html 引导表操作在特定窗口大小之间时异常

我使用的是引导版本2.2.1。我创建了一个包含表格的网页。桌子占据容器的整个宽度（100%）。但是，在不同大小的窗口之间，表的反应不同

请参阅所附图片以了解我的问题

这是表格的代码

<table id="item-table" class="table table-striped">
    <thead>
        <tr>
            <th style="text-align: center; vertical-align: middle; width: 4%;"></th>
            <th style="text-align: center; vertical-align: middle; width: 14%;">Product</th>
            <th style="text-align: center; vertical-align: middle; width: 11%;">Source Type</th>
            <th style="text-align: center; vertical-align: middle; width: 17%;">Source Location</th>
            <th style="text-align: center; vertical-align: middle; width: 7%;">Rental Quantity</th>
            <th style="text-align: center; vertical-align: middle; width: 7%;">Consigned Quantity</th>
            <th style="text-align: center; vertical-align: middle; width: 11%;">Destination Type</th>
            <th style="text-align: center; vertical-align: middle; width: 17%;">Destination Location</th>
            <th style="text-align: center; vertical-align: middle; width: 12%;">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align: center;"><input class="specs-value" type="hidden" name="specs[]" value=""><a class="trigger-remove_item" href="javascript:void();"><i class="icon-adt_trash"></i></a></td>
            <td>
                <select name="model_id[]" class="trigger-model_id span12">
                    <option value="" selected="selected">Select a product in the list</option>
                </select>
            </td>
            <td>
                <select name="source_type[]" class="trigger-source_destination_type span12" data-action_type="0"><option value="0">T.B.D.</option><option value="1" selected="selected">Warehouse</option><option value="2">Show</option></select>
            </td>
            <td>
                <select name="source_id[]" class="span12">
                    <option value="2" selected="selected">High Tech Handling</option>
                    <option value="1">Montreal</option>
                </select>
            </td>
            <td>
                <input name="quantity_rental[]" type="text" value="0" class="span12"></td><td><input name="quantity_consigned[]" type="text" value="0" class="span12"></td><td><select name="destination_type[]" class="trigger-source_destination_type span12" data-action_type="1"><option value="0">T.B.D.</option><option value="1" selected="selected">Warehouse</option><option value="2">Show</option></select>
            </td>
            <td>
                <select name="destination_id[]" class="span12">
                    <option value="2" selected="selected">High Tech Handling</option>
                    <option value="1">Montreal</option>
                </select>
            </td>
            <td><input name="price[]" type="text" value="0.00" class="span12"></td>
        </tr>
        <tr>
            <td colspan="9"><a class="item-add" href="javascript:void();">Add an item to the contract</a></td>
        </tr>
    </tbody>
</table>

产品
源类型
源位置
租赁数量
托运数量
目的地类型
目的地
价格
从列表中选择一种产品
T.B.D.仓库展览
高科技处理
蒙特利尔
T.B.D.仓库展览
高科技处理
蒙特利尔

我想你什么都没做。尝试删除它们，然后强制表仅使用

th%

的值进行扩展

我会在一些较小的数字框中添加

span2

或4

在这里做了一些改变。。。试试看，告诉我它是否解决了de问题。

span12