html - How can I put something on the top right corner to make that gap blend in with the header? -
with help, community of stack overflow, created html "sandwich", scrollable table , static header, thing still need "fix" white gap on top right corner (right above scrolling bar). make blend in header make 1 thing, without messing table.
may me?
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"); }); /*the following html , body rule sets required if using % width or height*/ 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; /*if want fixed width, set here, else set auto*/ min-width: 100%; /*if want % width, set here, else set 0*/ height: 100%; /*set table height here; can fixed value or %*/ min-height: 100%/*104px*/; /*if using % height, make large enough fit scrollbar arrows + caption + thead*/ font-family: 'agroverdana'; font-size: 16px; line-height: 20px; padding: 1px 0 100px 0; /*need enough padding make room caption*/ text-align: left; } .scrollingtable * {box-sizing: border-box;} .scrollingtable > div { position: relative; border-top: 1px solid white; /*the header's border-top*/ margin-left:2px; height: 100%; padding-top: 20px; /*this determines column header height*/ } .scrollingtable > div:before { top: 0; background: #9bc2e6; /*header row background color | header color*/ } .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/*43px*/; /*if using % height, make large enough fit scrollbar arrows*/ max-height: 100%; overflow: scroll/*auto*/; /*set auto if using fixed or % width; else scroll*/ overflow-x: hidden; border: 1px solid white; /*border around table body*/ } .scrollingtable > div > div:after {background: white;} /*match page background color*/ .scrollingtable > div > div > table { width: 100%; border-spacing: 0; margin-top: -20px; /*inverse of column header height*/ margin-right: 1px; /*uncomment if using % width*/ } .scrollingtable > div > div > table > caption { font-size:15px; position: absolute; top: -20px; /*inverse of caption height*/ margin-top: -1px; /*inverse of 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; /*header cell padding*/ } .scrollingtable > div > div > table > thead > tr > :first-child:before { content: ""; position: absolute; top: 0; left: 0; height: 20px; /*match column header height*/ border-left: 1px solid #9bc2e6; /*leftmost header border*/ } .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; /*header row font color | aka text color*/ } .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; /*match column header height*/ padding-top: 1px; border-left: 2px solid white; /*borders between header cells*/ } .scrollingtable .scrollbarhead {float: right;} .scrollingtable .scrollbarhead:before { position: absolute; width: 100px; top: -1px; /*inverse border-width*/ background: white; /*match page background color | right corner*/ } .scrollingtable > div > div > table > tbody > tr:after { content: ""; display: table-cell; position: relative; padding: 0; border-top: 1px solid white; /*can become issue if handled badly*/ top: -1px; /*inverse of border width*/ } .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; /*horizontal lines*/ padding: 0 6px 0 6px; height: 20px; /*match column header height*/ } .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;} /*alternate row color*/ .scrollingtable > div > div > table > tbody > tr > * + * {border-left: 2px solid white;} /*borders between body cells aka columns*/ .scrollingtable > div:before { top: 0; background: #9bc2e6; /*header row background color | header 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 cell @ 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>
if allowing change css of table this.
change width 100% 102% in line .scrollingtable > div > div > table
and see there won't design issue space covered.
i know should not increase size more 100% hope solve issue till won't better answer.
Comments
Post a Comment