1
I have a table html responsible for displaying system content to the user and the problem is that there is a space that persists between the Menu higher (which is a div class="navbar") and that table html.
Menu Superior:
<!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 that fills the html table:
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 of css for margin-top: -50px, but when I resize the screen the table is below the top menu.