每次重新创建时，其单元格大小都会增加

Question

我使用的是JQuery的datatable plugin.This是表的配置

            $('#myTable').dataTable({
                data: data,
                bFilter: false,
                bInfo: false,
                paging: false,
                destroy: true,
                columns: [
                    { 'data': 'ReportRank' },
                    { 'data': 'CategoryName' },
                    { 'data': 'ReportName' },
                    { 'data': 'PercentageChange' }
                ]
            });

数据是通过AJAX调用获得的。在单击按钮时，我再次获取数据并重新创建DataTable。但是每次我重新创建表格时，即使数据保持不变，表格单元格的宽度和高度也会增加。有什么线索说明是什么导致了这种行为吗？

Update

Html

 <div class="col-md-5">
        <div class="form-layout">
            <table class="table" id="myTable">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Category</th>
                        <th>Report</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>

Javascript

$('#btnGet').on('click', function () {

    //$('#table').dataTable().fnDestroy();
    reportTrends.populateDatatable();
    }

populateDatatable方法进行ajax调用，OnSuccess将数据传递给上述配置。

更新2

为了暂时解决问题，我已将配置更改为

columns: [
                    { 'data': 'ReportRank', 'width': '10%' },
                    { 'data': 'CategoryName', 'width': '25%' },
                    { 'data': 'ReportName','width':'50%' },
                    { 'data': 'PercentageChange', 'width': '15%' }
                ]

但我想要一个更好的解决方案，但我仍然对是什么原因感到困惑。

Answer 1

table {
  table-layout: fixed;
}

这会解决你的问题。几周前，就连我也面临着同样的问题，这个把戏解决了我的问题。