在你的帮助下，堆栈溢出社区，我创建了一个HTML＆＃34;三明治＆＃34;，一个可滚动的表和一个静态标题，我仍然需要修复＆＃34;修复＆＃34;是右上角的白色间隙（滚动条右上方）。我想让它与标题融为一体，使它看起来像一件事，而不会弄乱表格。
你可以帮帮我吗？
提前致谢。
$(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 and body rule sets are required only if using a % 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 you want a fixed width, set it here, else set to auto*/
min-width: 100%; /*if you want a % width, set it here, else set to 0*/
height: 100%; /*set table height here; can be fixed value or %*/
min-height: 100%/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
font-family: 'agroverdana';
font-size: 16px;
line-height: 20px;
padding: 1px 0 100px 0; /*need enough padding to make room for 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 this large enough to fit scrollbar arrows*/
max-height: 100%;
overflow: scroll/*auto*/; /*set to 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 an 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 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>
答案 0 :(得分：2)
如果您允许更改表的css，请执行此操作。
在此行var taskArray = [{
id: 247,
value: "Pin Lot"
}, {
id: 249,
value: "Excavate"
}, {
id: 245,
value: "Water & Sewer Installed"
}, {
id: 246,
value: "Pin Footings"
}, {
id: 248,
value: "Footings"
}, {
id: 251,
value: "Footing Inspection & Pour"
}, {
id: 250,
value: "Foundation Walls"
}, {
id: 252,
value: "Basement Backfill"
}, {
id: 253,
value: "Steel Beams"
}, {
id: 254,
value: "Framing and Exterior"
}, {
id: 254,
value: "Framing"
}, {
id: 300,
value: "Brick Received"
}, {
id: 255,
value: "Roof Ply"
}, {
id: 258,
value: "Windows Install"
}, {
id: 259,
value: "Heating R/I"
}, {
id: 261,
value: "Plumbing R/I"
}, {
id: 256,
value: "Shingle Roof (Upper)"
}, {
id: 276,
value: "Pour Basement Floors"
}, {
id: 257,
value: "Stairs Install"
}, {
id: 310,
value: "Back-Framing"
}, {
id: 260,
value: "Electrical R/I"
}, {
id: 265,
value: "Kitchen Measure"
}, {
id: 262,
value: "Alarm/Vac/Cable/Phone R/I"
}, {
id: 311,
value: "Frame Check"
}, {
id: 322,
value: "Frame Pass"
}, {
id: 289,
value: "Exterior Brick Work"
}, {
id: 290,
value: "Exterior Siding"
}, {
id: 317,
value: "Shingle Roof (Lower)"
}, {
id: 209,
value: "Drywall"
}, {
id: 307,
value: "Furnace & Ductwork"
}, {
id: 266,
value: "Insulation"
}, {
id: 277,
value: "Insulation Inspection"
}, {
id: 263,
value: "Hydro Meter"
}, {
id: 309,
value: "Gas Meter"
}, {
id: 267,
value: "Drywall Walls/Ceilings"
}, {
id: 268,
value: "Taping"
}, {
id: 270,
value: "Prime"
}, {
id: 273,
value: "Install Railings and Nosing"
}, {
id: 274,
value: "Install Ceramics"
}, {
id: 278,
value: "Install Trim"
}, {
id: 308,
value: "Drywall Check"
}, {
id: 324,
value: "1st Finish Tech Inspection"
}, {
id: 323,
value: "Paint Interior"
}, {
id: 280,
value: "Paint Exterior"
}, {
id: 279,
value: "Install Kitchen"
}, {
id: 326,
value: "Back-Trim"
}, {
id: 281,
value: "Complete Electrical"
}, {
id: 282,
value: "Complete Heating"
}, {
id: 284,
value: "Complete Cable/Phone"
}, {
id: 283,
value: "Complete Plumbing"
}, {
id: 327,
value: "Occupancy Inspection"
}, {
id: 288,
value: "Install Carpet"
}, {
id: 325,
value: "2nd Finish Tech Inspection"
}, {
id: 328,
value: "Paint Touch-up"
}, {
id: 330,
value: "QA Inspection"
}, {
id: 329,
value: "1st Clean"
}, {
id: 298,
value: "PDI"
}, {
id: 316,
value: "PDI Deficiencies"
}, {
id: 331,
value: "2nd Clean"
}];
console.log(taskArray[0].id, taskArray[0].value);
您将看到没有任何设计问题，但您的空间将被覆盖。
我知道我不应该增加100％以上的尺寸，但我希望它能解决你的问题，直到你得到更好的答案。