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

Open in new window



Kind regards,
Pooja
main-page.PNG
1-popup.PNG
52-popup.PNG
poojasureshkumarAsked:
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
0
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.