如何将列宽设置为jQuery数据类型？

我有一个jQuery datatable(以红色勾勒出来)，但是发生什么是表跳出了我为div设置的宽度(这是650像素)。

这里是屏幕截图：

这里是我的代码：

<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: '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>

有任何想法吗？

谢谢

解决方法

尝试设置表本身的宽度：

<table id="ratesandcharges1" class="grid" style="width: 650px;">

你必须调整650一几个像素，以说明你有什么填充，边距和边框。

你可能仍然有一些问题。我没有看到足够的水平空间，所有这些列，而无需标题，减少字体大小，或其他一些丑陋。

如何将列宽设置为jQuery数据类型？

解决方法

猜你在找的jQuery相关文章