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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.