suresh pondicherry
asked on
Table in javascript is showing gaps between td and th.
Hi All,
Advance thanks.
I attached the parent page screen shot which basically shows numbers on blue background. Am showing the dialog window when i hit the numbers.
The issue is in the dialog screen. Am getting gaps between table , th and tbody.
when i click number 1 showing dialog screen shot 1
when click 52 showing dialog screen shot 52..
dialog screen
==========
Kind regards,
Pooja
main-page.PNG
1-popup.PNG
52-popup.PNG
Advance thanks.
I attached the parent page screen shot which basically shows numbers on blue background. Am showing the dialog window when i hit the numbers.
The issue is in the dialog screen. Am getting gaps between table , th and tbody.
when i click number 1 showing dialog screen shot 1
when click 52 showing dialog screen shot 52..
dialog screen
==========
@model List<Model.Production.PAMReportV3ViewModel>
@{
ViewBag.Title = "PAMReport";
}
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/free-jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script src="~/Scripts/free-jqGrid/plugins/jquery.tablesorter.pager.js"></script>
<link href="~/Content/themes/redmond/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<style type="text/css">
.ui-jqgrid {
font-family: Arial;
}
.well {
padding: 10px;
background: #d9edf7;
}
.ui-jqgrid > .ui-jqgrid-view {
font-size: 12px;
}
.ui-jqgrid > .ui-jqgrid-view button {
font-size: 10px;
}
.ui-jqgrid > .ui-jqgrid-view a {
color: #428bca;
font-weight: bolder;
}
tr.jqgroup td {
font-weight: bold !important;
color: black;
}
.ui-icon {
font-size: 40px;
}
jqdialog .glyphicon, .ui-jqgrid .glyphicon {
font-size: 20px;
top: auto;
color: darkslateblue;
}
.subgrid-cell .ui-helper-hidden {
display: none
}
.subgrid-cell {
display: none
}
table {
width: 40em;
margin: 2em auto;
}
thead {
background: #000;
color: #fff;
}
td {
width: 10em;
padding: 0.3em;
}
tbody {
background: #ccc;
}
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
</style>
@*<p>@Model[0].ProjectName</p>*@
<table class="simple-little-table" cellspacing='0' style="height:300px" id="grid1">
<tr>
<th style="width:200px; height:10px">ProjectName</th>
<th style="width:200px; height:10px">FhaNumber</th>
</tr>
@foreach (Model.Production.PAMReportV3ViewModel item in Model)
{
<tr>
<td style="width:200px; height:10px">@item.ProjectName </td>
<td style="width:200px; height:10px">@item.FhaNumber</td>
</tr>
}
</table>
@*<div id="div_myPam" style="width:1400px;">
<table id="grid1"></table>
<div id="pager"></div>
</div>*@
<script type="text/javascript">
$(document).ready(function () {
//$("table")
// .tablesorter({ widthFixed: true, widgets: ['zebra'] })
// .tablesorterPager({ container: $("#pager") });
// $('#grid1').DataTable();
});
@*$("#grid1").jqGrid({
data:@Model ,
datatype: "json",
height: 300,
//width: 1450,
colNames: ['Project Name', 'FHA#'],
colModel: [
{
name: "ProjectName", index: "ProjectName", width: 130,
},
{
name: "FhaNumber", index: "FhaNumber", width: 80,
},
],
pager: $("#pager"),
rowNum: 50,
rowList: [50, 60, 70, 80, 100],
rownumbers: true,
loadonce: true,
viewrecords: true,
autowidth: false,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
subgrid: {
root: "rows",
repeatitems: true,
cell: "cell"
}
}
});*@
</script>
Kind regards,
Pooja
main-page.PNG
1-popup.PNG
52-popup.PNG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.