我已经在MVC中编程,可以正常工作。但是在一些Chrome浏览器中,列宽是不同的。这是正确的表
您会看到红色的下划线,这是错误的。
如您所见,前三列的宽度超出了应有的宽度。
这是代码
<div class="col-md-9" style="background-color:gainsboro">
<table cellpadding="0" cellspacing="0" border="0" class=" display stripe row-border order-column" id="example">
<thead>
<tr>
<th style="width:1%">fld_Id</th>
<th style="width:1%">ref_Id</th>
<th style="width:1%">Letter_Id</th>
<th style="width:1%">flags</th>
<th style="width:1%">Status</th>
<th style="width:1%">كد</th>
<th style="width:1%">نوع</th>
<th style="width:29%">ارجاع دهنده</th>
<th style="width:30%">موضوع ارجاع</th>
<th style="width:30%">موضوع نامه</th>
<th style="width:1%">تاريخ دريافت</th>
<th style="width:1%"></th>
<th style="width:1%"></th>
<th style="width:1%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
我正在使用MVC,Bootstrap v3.0.0,DataTable jquery。如何找到问题使它们在不同的钻子中看起来相同?
编辑部分: 表内部的数据将由DataTable Jquery服务器端填充。所以我做了客户端数据表。结果很好,在不同的浏览器中没有差异。当我使用服务器端数据表时,会显示出差异
这是我用来填充数据表的代码
<script type="text/javascript">
var BindDataTable = function (clicked_id) {
var table = $("#example").DataTable({
"destroy": true,"bServerSide": true,"sAjaxSource": "/Main/GetLetterList","fnServerData": function (sSource,aoData,fnCallback) {
aoData.push({ "name": "fld_id","value": boldMenu });
$.ajax({
type: "Get",data: aoData,url: sSource,dataType: "json",success: fnCallback,error: function (response) {
window.location.href = '/accLogin/Login/';
}
})
},"fnDrawCallback": function () {
var UnBoldMenu = "#" + $("#unBoldMenu").val();
$("#ulTreeview").find(UnBoldMenu).css('font-weight','normal');
},"fnRowCallback": function (nRow,aData,iDisplayIndex,iDisplayIndexFull) {
if (aData["flags"] == "4") {
$('td',nRow).css('font-weight','bold');
}
if (aData["Status"] == "1") {
$('td',nRow).css('background-color','lightgreen');
}
},"aoColumns": [
{ "mData": "fld_Id" },{ "mData": "ref_Id" },{ "mData": "Letter_Id" },{ "mData": "flags" },{ "mData": "Status" },{ "mData": "ProjectCode" },{ "mData": "LetterType" },{ "mData": "Referrer" },{ "mData": "Ref_subject" },{ "mData": "Letter_subject" },{ "mData": "Date_Received" },{
"mData": "ref_Id","render": function (ref_Id,type,full,meta) {
return '<a href="#" onclick="ViewLetter(' + ref_Id + ')" title="مشاهده نامه"><li class="glyphicon glyphicon-eye-open"></li></a>'
}
},meta) {
return '<a href="#" onclick="ReferenceLetter(' + ref_Id + ')" title="ارجاع نامه"><li class="glyphicon glyphicon-edit"></li></a>'
}
},{
"mData": "Letter_Id","render": function (Letter_Id,meta) {
return '<a href="#" onclick="ReferenceList(' + Letter_Id + ')" title="گردش نامه"><li class="glyphicon glyphicon-retweet"></li></a>'
}
}
]
})
.columns.adjust();
if (clicked_id!=-16)
table.columns([0,1,2,3,4]).visible(false);
else
table.columns([0,4,12]).visible(false);
}
var ViewLetter = function (refId) {
var url = "/Main/ViewLetter?Ref_Id=" + refId;
$('body').css('cursor','wait');
$("#myModalBodyDiv").load(url,function () {
$("#myModal").modal("show");
})
}
var ReferenceLetter = function (refId) {
var url = "/Main/ReferenceLetter?Ref_Id=" + refId;
$("#myModalBodyDivRefer").load(url,function () {
$("#myModalRefer").modal("show");
})
}
var ReferenceList = function (letterId) {
var url = "/Main/ReferenceList?Letter_Id=" + letterId;
$("#myModalBodyDivReferList").load(url,function () {
$("#myModalReferList").modal("show");
})
}
</script>
我在document.ready上调用BindDataTable