Kyle
Reputation: 1578
How to keep a table from moving sideways?
Initially, I had a little gap on the top right that was annoying me:
P.S.: If you still can't see it, it's on the top right above the cursor.
Then I changed the width of the blue header to 102% to cover the gap:
It fixed the gap problem but created another, now if you click on the table and drag to the right, it'll move the table to the right, hiding the left side of the table. How can I keep the gap covered 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>Upvotes: 3
Views: 127
Answers (1)
Seblor
Reputation: 7136
After some tests, I found the problem: it's the scrollbarhead which is causing the problem. I think you've got this script from some website, and this table header is adding the gap you don't want.
I "removed" it with a simple display:none, and it's working (I also changed the width to 100%):
EDIT: The fact that the table was being pushed to the right when dragging it, was because you were pushing this th on the left.
I hope I helped you.
Upvotes: 3
Related Questions
- How to expand an HTML table sideways left and right in CSS?
- How to scroll table only in css (horizontal/width)
- Why is my table header not staying in place
- How can I make my table to move in the side of the first table?
- How do I not have my table shift down when text lengths change? (Keep the table fixed in one position)
- Keep inner div from sliding left after adding to table
- CSS - Force table to stay on the page
- CSS table jumping side to side ?
- table column to not push other columns away?
- How to stop DIV element from getting pushed down in table?