如何将列宽设置为 jQuery 数据表? [英] How to set column widths to a jQuery datatable?
问题描述
我有一个 jQuery 数据表(用红色标出)，但结果是该表超出了我为 div 设置的宽度(650 像素).
这是屏幕截图:
这是我的代码:
<div id="ratesandcharges1Div";样式=宽度:650px；">总费用<th>VAT%</th><th>计算.类型<th>支付方</th><th>From</th><th>To</th><th>VAT</th><th>MVGB</th></tr></thead><!--数据行--><tr><td>天/标签</td><td>55.00</td><td>3.00</td><td>165.00</td><td>20.00</td><td>租借时间</td><td>收单方/代理</td><td>5/11/2010</td><td>08/11/2010</td><td>33.00</td><td>1.98</td></tr><tr><td>PAI</td><td>7.50</td><td>3.00</td><td>22.50</td><td>20.00</td><td>租借时间</td><td>驱动程序/客户.</td><td>5/11/2010</td><td>08/11/2010</td><td>4.50</td><td>0.00</td></tr><tr><td>BCDW</td><td>15.00</td><td>3.00</td><td>45.00</td><td>20.00</td><td>租借时间</td><td>驱动程序/客户.</td><td>5/11/2010</td><td>08/11/2010</td><td>9.00</td><td>0.54</td></tr><tr><td>BTP</td><td>7.15</td><td>3.00</td><td>21.45</td><td>20.00</td><td>租借时间</td><td>驱动程序/客户.</td><td>5/11/2010</td><td>08/11/2010</td><td>4.29</td><td>0.26</td></tr></tbody>
有什么想法吗?
谢谢
尝试设置表格本身的宽度:
您必须将 650 调整几个像素，以考虑您拥有的任何填充、边距和边框.
不过，您可能仍然会遇到一些问题.如果不修改标题、减小字体大小或其他一些丑陋的东西，我就看不到所有这些列的足够水平空间.
I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).
Here is the screen shot:
Here is my code:
<script type="text/javascript">
var ratesandcharges1;
$(document).ready(function() {
/* Init the table*/
$("#ratesandcharges1").dataTable({
"bRetrieve": false,
"bFilter": false,
"bSortClasses": false,
"bLengthChange": false,
"bPaginate": false,
"bInfo": false,
"bJQueryUI": true,
"bAutoWidth": false,
"aaSorting": [[2, "desc"]],
"aoColumns": [
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '9%' },
{ sWidth: '10%' } ]
});
ratesandcharges1.fnDraw();
});
</script>
<div id="ratesandcharges1Div" style="width: 650px;">
<table id="ratesandcharges1" class="grid" >
<thead>
<!--Header row-->
<tr>
<th>Charge Code</th>
<th>Rates</th>
<th>Quantity</th>
<th>Total Charge</th>
<th>VAT %</th>
<th>Calc. Type</th>
<th>Paid By</th>
<th>From</th>
<th>To</th>
<th>VAT</th>
<th>MVGB</th>
</tr>
</thead>
<!--Data row-->
<tbody>
<tr>
<td>Day/Tag</td>
<td>55.00</td>
<td>3.00</td>
<td>165.00</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Bill-to/Agent</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>33.00</td>
<td>1.98</td>
</tr>
<tr>
<td>PAI</td>
<td>7.50</td>
<td>3.00</td>
<td>22.50</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Driver/Cust.</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>4.50</td>
<td>0.00</td>
</tr>
<tr>
<td>BCDW</td>
<td>15.00</td>
<td>3.00</td>
<td>45.00</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Driver/Cust.</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>9.00</td>
<td>0.54</td>
</tr>
<tr>
<td>BTP</td>
<td>7.15</td>
<td>3.00</td>
<td>21.45</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Driver/Cust.</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>4.29</td>
<td>0.26</td>
</tr>
</tbody>
</table>
</div>
Any ideas ?
Thanks
解决方案 Try setting the width on the table itself:
<table id="ratesandcharges1" class="grid" style="width: 650px;">
You'll have to adjust the 650 by a couple pixels to account for whatever padding, margins, and borders you have.
You'll probably still have some issues though. I don't see enough horizontal space for all those columns without mangling the headers, reducing the font sizes, or some other bit of ugliness.
这篇关于如何将列宽设置为 jQuery 数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆