Delete space between the Menu with div class navbar and a responsive Html table [duplicate]

1

I have a table html that is responsible for displaying the system content for the user, and the problem is that there is a space that persists between the Menu and that % > table html .

Top Menu:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Meu Aplicativo ASP.NET</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Nome do aplicativo", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Início", "Index", "Home")</li>
                    <li>@Html.ActionLink("Sobre", "About", "Home")</li>
                    <li>@Html.ActionLink("Contato", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

This is the CSS I use for table html:

<style>

    .table {
        position: absolute;
        top: 0;
        left: 10px;
        right: -5px;
        width: 99%;
        min-height: 96%;
        height: auto;
        font-size: 200%;
        table-layout: fixed;
    }

    .table td {
        border: 2px solid black;
        text-align: center;
        padding: 5px;
        margin: 5px;
    }
</style>

This is the code I fill in to table html:

var data = [
  {
    "nome": "Quadro 1"
  },
  {
    "nome": "Quadro 2"
  },
  {
    "nome": "Quadro 3"
  },
  {
    "nome": "Quadro 4"
  },
  {
    "nome": "Quadro 5"
  },
  {
    "nome": "Quadro 6"
  },
  {
    "nome": "Quadro 7"
  },
  {
    "nome": "Quadro 8"
  },
  {
    "nome": "Quadro 9"
  }
];

$(document).ready(function () {

   var nomeQuadro = data;
   var _nome = '';
   for(var i = 0; i < nomeQuadro.length; i++){
      _nome += (i != 0 && i%3 == 0 ? '</tr><tr>' : '') + '<td>' + nomeQuadro[i].nome + '</td>';
   }

   $("#tblQuadro tbody").append('<tr>' + _nome + '</tr>');

});

I tried to change the attribute from div class="navbar" to css , but when I resize the screen the table is under the Top Menu.

    
asked by anonymous 28.12.2018 / 19:49

0 answers