How to keep the table from moving sideways?
At first I had a small space at the top right , which annoyed me:
PS: If you still can't see it, it's at the top right above the cursor .
Then I changed the width of the blue title to 102% to cover the gap:
It fixed the gap issue but created another one, now if you click on the table and drag to the right, it will move the table to the right, hiding the left side of the table. How can I keep the gap closed without screwing the table?
Thanks in advance.
$(function(){
$( "#btfirst" ).button({
icons: {
primary: "ui-icon-seek-first"
},
text: false
});
$("#btfirst").css({'height': '1.2em','margin':'1px'});
$( "#btprev" ).button({
icons: {
primary: "ui-icon-seek-prev"
},
text: false
});
$("#btprev").css({'height': '1.2em','margin':'1px'});
$( "#btnext" ).button({
icons: {
primary: "ui-icon-seek-next"
},
text: false
});
$("#btnext").css({'height': '1.2em','margin':'1px'});
$( "#btlast" ).button({
icons: {
primary: "ui-icon-seek-end"
},
text: false
});
$("#btlast").css({'height': '1.2em','margin':'1px'});
$("body").css("overflow", "hidden");
});
html {
width: 100%;
height: 100%;
}
@font-face {
font-family: 'agroverdanab';
src: url('./fonts/agroverdanab.eot');
src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');
font-family: 'agroverdana';
src: url('./fonts/agroverdana.eot');
src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}
body {
float: center;
border: 1px solid #9BC2E6;
box-sizing: border-box;
width: 99.4%;
height: 99%;
margin:0.3% 0.3% 0.3% 0.3%;
}
.scrollingtable {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: auto; /*se a tabela tiver tamanho fixo set em pixels, senaõ coloque auto*/
min-width: 100%; /*se o width acima for em %, set o minimo, senão set 0*/
height: 100%; /*se a tabela tiver tamanho fixo set em pixels, senaõ coloque auto*/
min-height: 100%; /*se o width acima for em %, set para ser grande o suficiente para caber scrollbar arrows + caption + thead = 104px*/
font-family: 'agroverdana';
font-size: 16px;
line-height: 20px;
padding: 1px 0 100px 0; /*precisa fazer espaço para o titulo*/
text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
position: relative;
border-top: 1px solid white; /*a borda da table header*/
height: 100%;
padding-top: 20px; /*determina a altura do table header*/
}
.scrollingtable > div:before {
top: 0;
background: #9BC2E6; /*fundo da table header*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
}
.scrollingtable > div > div {
min-height: 0; /*se % coloque 0, se fixo coloque 43px*/
max-height: 100%;
overflow: scroll;
overflow-x: hidden;
border: 1px solid white;
}
.scrollingtable > div > div:after {background: white;} /*combina com o background da página*/
.scrollingtable > div > div > table {
width: 102%;
border-spacing: 0;
margin-top: -20px; /*o inverso do tamanho da table header*/
margin-right: 1px;
}
.scrollingtable > div > div > table > caption {
font-size:15px;
position: absolute;
top: -20px; /*inverso do tamanho do titulo "engenharia"*/
margin-top: -1px; /*inverso da border-width*/
width: 100%;
font-weight: bold;
text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
vertical-align: bottom;
white-space: nowrap;
text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
display: inline-block;
padding: 0 6px 0 6px; /*padding das linhas*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 20px; /*combina com a altura da table header*/
border-left: 1px solid #9BC2E6;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
position: absolute;
top: 0;
white-space: pre-wrap;
color: black; /*cor do texto*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
content: "";
display: block;
min-height: 20px; /*combina com a altura da coluna header*/
padding-top: 1px;
border-left: 2px solid white; /*border entre a s linhas*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
position: absolute;
width: 100px;
top: -1px; /*borda inversa*/
background: white; /*cor pra combinar com o fundo da página*/
}
.scrollingtable > div > div > table > tbody > tr:after {
content: "";
display: table-cell;
position: relative;
padding: 0;
border-top: 1px solid white;
top: -1px; /*inverso da border*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;} /*White lines*/
.scrollingtable > div > div > table > tbody > tr > * {
border-bottom: 1px solid white; /*linha horizontal*/
padding: 0 6px 0 6px;
height: 20px;
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: #DDEBF7;} /*alterna a cor das linhas*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 2px solid white;} /*linhas da colunas*/
.scrollingtable > div:before {
top: 0;
background: #9BC2E6; /*header row background color*/
}
.thead_prop, .tbody_prop{
font-family: 'agroverdana';
font-size:13px;
}
#content{left:1px;border-top:solid 1px #9BC2E6;border-bottom:solid 1px #9BC2E6;flex:1;}
#navbar{padding:3px 4px 3px 2px} /*top | right | bottom | left*/
#navbutton{float:right;}
#vpad-pesq{float:left;}
#searching{margin-left:2px;padding-top:2px;}
#msgbar{border-top:solid 1px #9BC2E6;border-bottom:solid 1px #9BC2E6;height:3%;}
#footer{border-top:solid 1px #9BC2E6;border-top:0;height:5%;}
<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Central de Controle da Engenharia</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header style="padding-bottom:5px;text-align:center;">Central de Controle da Engenharia</header>
<section id="content">
<header id="navbar">
<input type="text" id="vpad-pesq"/>
<select id="searching">
<option>Código</option>
<option>Nome</option>
</select>
<div id="navbutton">
<button id="btfirst"></button>
<button id="btprev"></button>
<button id="btnext"></button>
<button id="btlast"></button>
</div>
</header>
</section>
<div class="scrollingtable">
<div>
<div>
<table>
<thead>
<tr>
<th class="thead_prop">
<div label="Código"></div>
</th>
<th class="thead_prop">
<div label="Descrição"></div>
</th>
<th class="scrollbarhead"/>
<!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
</tr>
</thead>
<tbody>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
</tbody>
</table>
</div>
<!-- pode colocar text aqui -->
</div>
<section id="msgbar"></section>
<footer id="footer">Rodapé</footer>
</div>
</body>
</html>
+3
source to share
1 answer
After some tests, I found the problem: this is the problem scrollbarhead
. I think you have this script from some website and this table header is adding a flaw you don't want.
I "removed" it with a simple display:none
one and it worked (I also changed the width to 100%):
EDIT: The fact that the table was dragging to the right when dragging was that you clicked on it th
from the left.
I hope I helped you.
+3
source to share