在大多数Chrome版本和Firefox中,列宽均不同

我已经在MVC中编程,可以正常工作。但是在一些Chrome浏览器中,列宽是不同的。这是正确的表

在大多数Chrome版本和Firefox中,列宽均不同

您会看到红色的下划线,这是错误的。

在大多数Chrome版本和Firefox中,列宽均不同

如您所见,前三列的宽度超出了应有的宽度。

这是代码

  <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

hhyyoo 回答:在大多数Chrome版本和Firefox中,列宽均不同

我从Jquery设置每列的宽度,并从中删除它。所以代码是这样的:

 <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>fld_Id</th>
                <th>ref_Id</th>
                <th>Letter_Id</th>
                <th>Flags</th>
                <th>Status</th>
                <th>كد</th>
                <th>نوع</th>
                <th>ارجاع دهنده</th>
                <th>موضوع ارجاع</th>
                <th>موضوع نامه</th>
                <th>تاريخ دريافت</th>
                <th></th>
                <th></th>
                <th></th>                    
            </tr>
        </thead>
        <tbody></tbody>           
    </table>

</div>

,然后在jquery中设置宽度,如下所示:

<script type="text/javascript">

var CategoryClick = function (clicked_id) {
    var boldMenu = $("#boldMenu").val();
    if  (boldMenu != clicked_id)
        $("#unBoldMenu").val(boldMenu);
    $("#boldMenu").val(clicked_id);
    var str = "#" + clicked_id;
    $("#ulTreeview").find(str).css('font-weight','bold');
    BindDataTable(clicked_id);
}

var BindDataTable = function (clicked_id) {  //response
    var boldMenu = $("#boldMenu").val();
     if (@User.Identity.Name=="" || @User.Identity.Name==null)
        window.location.href = '/ACCLogin/Login/';


    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","width": "1%"},{
                "mData": "ref_Id","width": "1%" },{
                "mData": "Letter_Id",{
                "mData": "Flags",{
                "mData": "Status",{
                "mData": "ProjectCode",{
                "mData": "LetterType",{
                "mData": "Referrer","width": "29%" },{
                "mData": "Ref_subject","width": "30%" },{
                "mData": "Letter_subject",{
                "mData": "Date_Received","width": "1%"  },"width": "1%","render": function (ref_Id,type,full,meta) {
                    return '<a href="#" onclick="ViewLetter(' + ref_Id + ')" title="مشاهده نامه"><i class="glyphicon glyphicon-eye-open"></li></a>'
                }
            },meta) {
                    return '<a href="#" onclick="ReferenceLetter(' + ref_Id + ')" title="ارجاع نامه"><i class="glyphicon glyphicon-edit"></li></a>'
                }
            },"render": function (Letter_Id,meta) {
                    return '<a href="#" onclick="ReferenceList(' + Letter_Id + ')" title="گردش نامه"><i 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");
    })                  
}        

并解决了问题。所有的浏览器都显示相同的表格列宽度。

本文链接:https://www.f2er.com/3118895.html

大家都在问