如何防止桌子侧身移动？

Question

最初，我在右上角上有一点间隙让我烦恼：

P.S。：如果你仍然看不到它，它就在光标上方的右上方。

然后我将蓝色标题的宽度更改为102％以弥补差距：

它修复了间隙问题，但创建了另一个，现在如果你点击桌子并向右拖动，它会将桌子向右移动，隐藏桌子的左侧。如何在不拧紧桌子的情况下保持间隙？

提前致谢。

$(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>

Answer 1

经过一些测试后，我发现了问题：导致问题的是scrollbarhead。我认为您已从某个网站获得此脚本，此表格标题正在增加您不想要的差距。

我＆＃34;删除＆＃34;它有一个简单的display:none，并且它正在工作（我也将宽度更改为100％）：

Here is the result

编辑：拖动桌子时向右推的事实是因为你在左边推了这个th。

我希望我帮助过你。