c# - 大多数 chrome 版本和 Firefox 中的列宽度不同
问题描述
我已经在 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 服务器端填充。所以我制作了客户端 DataTable 。结果还可以，在不同的浏览器中没有区别。当我使用服务器端数据表时，将显示差异
这是我用来填充 DataTable 的代码
<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, aoData, type, full, meta) {
return '<a href="#" onclick="ViewLetter(' + ref_Id + ')" title="مشاهده نامه"><li class="glyphicon glyphicon-eye-open"></li></a>'
}
}, {
"mData": "ref_Id",
"render": function (ref_Id, type, full, meta) {
return '<a href="#" onclick="ReferenceLetter(' + ref_Id + ')" title="ارجاع نامه"><li class="glyphicon glyphicon-edit"></li></a>'
}
}
, {
"mData": "Letter_Id",
"render": function (Letter_Id, type, full, 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, 1, 2, 3, 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
解决方案
我从 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",
"width": "1%" },
{
"mData": "Flags",
"width": "1%" },
{
"mData": "Status",
"width": "1%" },
{
"mData": "ProjectCode",
"width": "1%" },
{
"mData": "LetterType",
"width": "1%" },
{
"mData": "Referrer",
"width": "29%" },
{
"mData": "Ref_subject",
"width": "30%" },
{
"mData": "Letter_subject",
"width": "30%" },
{
"mData": "Date_Received",
"width": "1%" },
{
"mData": "ref_Id",
"width": "1%",
"render": function (ref_Id, aoData, type, full, meta) {
return '<a href="#" onclick="ViewLetter(' + ref_Id + ')" title="مشاهده نامه"><i class="glyphicon glyphicon-eye-open"></li></a>'
}
}, {
"mData": "ref_Id",
"width": "1%",
"render": function (ref_Id, type, full, meta) {
return '<a href="#" onclick="ReferenceLetter(' + ref_Id + ')" title="ارجاع نامه"><i class="glyphicon glyphicon-edit"></li></a>'
}
}
, {
"mData": "Letter_Id",
"width": "1%",
"render": function (Letter_Id, type, full, 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, 1, 2, 3, 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");
})
}
问题解决了。所有 borwsers 显示相同的表列宽度。
推荐阅读
- python - 检查文本文件的字典中是否已存在密钥
- c# - 如何以不同形式获取两个标签中的滚动条值
- botframework - 没有这样的主机是已知的-QnA Maker
- android - 例外：某些设备中的音频缓冲区大小无效
- c++ - 存储数据的对象和存储指向数据的智能指针的对象
- svg - 如何使 SVG 向左和向右拉伸，同时保持中间的纵横比？
- command-line - 如何使用 dotnet cli 获取包元数据？
- php - Laravel 5.8 php artisan migrate 抛出错误：Illuminate\Database\QueryException
- selenium-webdriver - 如果 div id 有重复，如何选择需要的 div id？
- oracle - 对象导航器上的更改顺序