我正在使用twitter bootstrap的标签导航，除此之外我还在使用jQuery dataTable。问题是我正在尝试扩大特定列，但无论我做什么，我都无法改变宽度。
我的表：
<table id="tbl_quantity" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<!--thead section is required-->
<thead>
<tr>
<th data-class="expand" width="60">Quantity</th>
<th data-hide="phone,tablet">Type</th>
<th data-hide="phone,tablet">Price</th>
<th data-hide="phone,tablet">#/UM</th>
<th data-hide="phone,tablet">Text/Unit</th>
<th data-hide="phone,tablet">Text For Customer</th>
<th data-hide="phone,tablet">Weight(lb)</th>
<th data-hide="phone,tablet">Weight(kg)</th>
<th data-hide="phone,tablet">Sort Order</th>
<th data-hide="phone,tablet">Publish</th>
<th data-hide="phone,tablet">Action</th>
</tr>
</thead>
<!--tbody section is required-->
<tbody>
<tr>
<td>
<div class="form-group">
<input type="text" name="txt_ProdQty[]" class="txt_ProdQty form-control" placeholder="Ex: 10" required />
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_ProdQtyType[]" class="txt_ProdQtyType form-control" placeholder="Ex: stems" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_QtyPrice[]" class="txt_QtyPrice form-control" placeholder="0.00" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_itemsPerUnit[]" class="txt_itemsPerUnit form-control" placeholder="1" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_textPerUnit[]" class="txt_textPerUnit form-control" placeholder="Ex: per stem" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_TextForCustomer[]" class="txt_TextForCustomer form-control" placeholder="Ex: 10 stems" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_QtyWt_lb[]" class="txt_QtyWt_lb form-control" placeholder="0" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_QtyWt_kg[]" class="txt_QtyWt_kg form-control" placeholder="0" required/>
</div>
</td>
<td>
<div class="form-group">
<input type="text" name="txt_sortOrder[]" class="txt_sortOrder form-control" placeholder="Ex: 1" required/>
</div>
</td>
<td>
<div class="form-group">
<select name="sel_QtyPublish[]" class="sel_QtyPublish form-control selectpicker" required>
<option value="1">Not Published</option>
<option value="2">Published</option>
</select>
</div>
</td>
<td>
<button class="btn btn-danger btn_qtyDelete">Delete</button>
</td>
</tr>
</tbody>
<!--tfoot section is optional-->
<tfoot>
<tr>
<th>Quantity</th>
<th>Type</th>
<th>Price</th>
<th>#/UM</th>
<th>Text/Unit</th>
<th>Text For Customer</th>
<th>Weight(lb)</th>
<th>Weight(kg)</th>
<th>Sort Order</th>
<th>Publish</th>
<th>Action</th>
</tr>
</tfoot>
</table>
我的JS：
var tableElementQty = $('#tbl_quantity');
tableElementQty.dataTable({
sPaginationType: 'bootstrap',
oLanguage : {
sLengthMenu: '_MENU_ records per page'
},
// disable sorting on the checkbox column
aoColumnDefs : [],
aoColumns : [
{"sWidth":"60px"}, //Quantity
{"sWidth":"60px"}, //Type
{"sWidth":"60px"}, //Price
{"sWidth":"60px"}, //#/UM
{"sWidth":"60px"}, //Text/Unit
{"sWidth":"60px"}, //Text For Customer
{"sWidth":"60px"}, //Weight(lb)
{"sWidth":"60px"}, //Weight(kg)
{"sWidth":"60px"}, //Sort Order
{"sWidth":"550px"}, //Publish
{"sWidth":"60px"} //Action
],
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth" : false,
sDom : "t",
fnPreDrawCallback: function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelperQty) {
responsiveHelperQty = new ResponsiveDatatablesHelper(tableElementQty, breakpointDefinition, {clickOn:'row'});
}
},
fnRowCallback : function (nRow) {
responsiveHelperQty.createExpandIcon(nRow);
},
fnDrawCallback : function () {
// Respond to windows resize.
responsiveHelperQty.respond();
}
});
我尝试用以下代码修改大小的代码：
var oTable = $('#tbl_quantity').dataTable();
oTable.fnAdjustColumnSizing();
我在桌子显示时也在firebug控制台中手动尝试了。但是这些专栏根本没有变化。我做错了什么？
答案 0 :(得分：7)
如果要手动设置每列的宽度，必须将table-layout设置为fixed。
#tbl_qunatity { table-layout: fixed; }