Link to home
Start Free TrialLog in
Avatar of suresh pondicherry
suresh pondicherryFlag for United States of America

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

@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
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial