解决datatables在bootstrap模态框modal中表头缩小问题

最近项目中需要在弹出框中集成datatables，整个项目框架用的bootstrap，用户点击按钮时，弹出模态框，模态框中的datatables自动加载数据。

模态框代码：我调整了模态框的宽度

aria-labelledby="myModalLabel" aria-hidden="true"
style="margin-top: 50px;">

aria-hidden="true">×

记录统计

οnclick="searchNum('myselfRecordMonth');">
 月记录

οnclick="searchNum('myselfRecordDay');">
 日记录

                                 //表格的width属性必须添加，否则表头会缩小

时间
成功发送数
失败发送数
未发送数

datatables初始化代码：

function searchNum(url) {
record = $('#record').DataTable({
searching : false,
ordering : false,
processing : true,
bLengthChange : false,
iDisplayLength : 5,
destroy : true,
serverSide : true,
ajax : {
url : '/sms/' + url,
type : "post",
async : true,
type : "post"
},
columns : [ {
"data" : "time",
"sClass" : "text-center"
}, {
"data" : "success",
"sClass" : "text-center"
}, {
"data" : "fail",
"sClass" : "text-center"
}, {
"data" : "notSend",
"sClass" : "text-center"
} ]
});

}

用户点击按钮时，模态框弹出：

function showModal() {

//调整模态框中datatables的表头缩小问题 ，注意下面on方法传入的参数是modal的id
$(document).on('record_modal', function (e) {
      $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});

$("#record_modal").modal('show');
searchNum('myselfRecordDay');

}

这样表格。