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

@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=""></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="" />

<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;


<table class="simple-little-table" cellspacing='0' style="height:300px" id="grid1">
        <th style="width:200px; height:10px">ProjectName</th>
            <th style="width:200px; height:10px">FhaNumber</th>        
    @foreach (Model.Production.PAMReportV3ViewModel item in Model)
            <td style="width:200px; height:10px">@item.ProjectName </td>
            <td style="width:200px; height:10px">@item.FhaNumber</td>

@*<div id="div_myPam" style="width:1400px;">
    <table id="grid1"></table>
    <div id="pager"></div>
<script type="text/javascript">
    $(document).ready(function () {
        //    .tablesorter({ widthFixed: true, widgets: ['zebra'] })
        //    .tablesorterPager({ container: $("#pager") });

       // $('#grid1').DataTable();
            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"


Open in new window

Kind regards,
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
If possible, please post a link to your working page. You're much more likely to get useful answers if you do that. It's most likely a problem with your CSS, but without seeing a live link, it's going to quite difficult to see exactly which rules are causing the gaps. Screenshots don't allow us to inspect the live HTML and CSS
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.