Bootstrap Datatable Header未与Modal中的正文内容对齐

Question

截图

这是我的数据表初始化代码：

$('#Table2').DataTable({

    scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
   'paging': false,
   'lengthChange': false,
   'searching': true,
   'ordering': true,
   'info': true,
   'autoWidth': true
});

我的数据表是从服务器端cs代码创建的，如下所示：

string _strDiv = string.Empty;
_strDiv = "<table id='tblSaleOrder' class='table table-hover table-condensed table-responsive dataTable no-footer' width='100%' style='font-size: small; width: 100%;' border='0' role='grid'>";
_strDiv += "<thead style='background-color: #3c8dbc;color: #f9f9f9;'>";
_strDiv += "<tr role='row'>";
_strDiv += "<td>Plant ID</td>";
_strDiv += "<td>QA #</td>";
_strDiv += "<td>SaleOrder #</td>";
_strDiv += "<td>Material #</td>";
_strDiv += "<td>Customer Code</td>";
//_strDiv += "<td>Customer Name</td>";
_strDiv += "<td>Item #</td>";
_strDiv += "<td>Line #</td>";
_strDiv += "<td>Sale Order Date</td>";
_strDiv += "<td>Quality/Type</td>";
_strDiv += "<td>Description</td>";
_strDiv += "<td>Quantity</td>";
_strDiv += "<td align='center'>Action</td>";
_strDiv += "</tr>";
_strDiv += "</thead>";
_strDiv += "<tbody>";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
    _strDiv += "<tr>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["PlantID"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["QAno"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["SaleOrderNo"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["MaterialNo"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["CustomerCode"].ToString() + "</td>";
    //_strDiv += "<td>" + ds.Tables[0].Rows[i]["CustomerName"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["Item_no"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["Line_no"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["SaleOrderDate"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["Quality"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["Description"].ToString() + "</td>";
    _strDiv += "<td>" + ds.Tables[0].Rows[i]["OrderQuantity"].ToString() + "</td>";
    _strDiv += "<td align='center'><button type='button' id='btnEditSaleOrder' class='btn btn-sm btn-primary' data-matcode='" + ds.Tables[0].Rows[i]["MaterialNo"].ToString() + "' data-sonum='" + ds.Tables[0].Rows[i]["SaleOrderNo"].ToString() + "' data-tooltip='tooltip' title='Edit This Item' data-placement='top'><i class='fa fa-pencil'></i></button></td>";
    _strDiv += "</tr>";
}
_strDiv += "</tbody>";
_strDiv += "</table>";

对表格进行排序后，列会发生变化。即，点击我桌子的标题，它会自动完全调整tbody内容。