.html和.css如下。我有一张固定高度的桌子。最后一行没有显示这个高度，我必须向下滚动。这是故意的。我想将滚动条直接放在桌子的右边，页脚应该显示而不必先向下滚动，而且我希望看到页脚左侧的项目，不仅在第一列而且是尽可能多的列。谁能帮忙;纠正我的css / html？
.jqcTable {
border : 1px solid rgba(204,204,204,0.8);
border-collapse: collapse;
font-family : Arial;
font-size : 10pt;
margin: 0;
padding: 0;
}
.jqcTable td {
border : 1px solid rgba(204,204,204,0.8);
}
.jqcTable tfoot td div { border-top: 1px solid #8C8C8C;background: #EBEBEB;}
.jqcTable tfoot td { padding: 0; font-size: 12px; float : left; }
.jqcTable tfoot td div{ padding: 2px; }
.jqcTable tfoot td ul {margin: 0;
padding:0;
list-style: none;
text-align: right;
}
.jqcTable tfoot li { display: inline; }
.jqcTable tfoot li a { text-decoration: none;
display: inline-block;
padding: 2px 8px;
margin: 1px;
color: #F5F5F5;
border: 1px solid #8C8C8C;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
background-color:#8C8C8C;
}
.jqcTable tfoot ul.active, .jqcTable tfoot ul a:hover {
text-decoration: none;
border-color: #7D7D7D;
color: #F5F5F5;
background: none;
background-color:#8C8C8C;
}
.jqcTable tr {
border:solid 1px #BBD9EE;
padding: 0.3em;
caption: 0.3em;
}
.jqcTable th {
background: #eee;
}
.tableHolder {
margin: 0; padding: 0; overflow-y: auto; // width : 50%; of 600px // plaatst scrolbar naar links, maar tever van table
}
.EditableCell {
-webkit-box-shadow: inset 0 0 6px #5d4301;
box-shadow: inset 0 0 6px #5d4301;
}
.MaintainButton {
-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
background-color:#ffec00;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
width:100px;
}
.MaintainButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}
.MaintainButton:active {
position:relative;
top:1px;
} <html>
<head>
<link href="jqc-all.css" rel="stylesheet" type="text/css">
</head>
<body spellcheck="false">
<span id="customerDataModel" jqc-type="jqcDataModel"></span>
<div class="tableHolder" style="max-height: 525px">
<table id="taskTable" jqc-type="jqcTable" class="jqcTable">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div id="paging">
<ul>
<li>
<a href="#">
<span>Previous</span>
</a>
</li>
<li>
<a href="#" class="active">
<span>1</span>
</a>
</li>
<li>
<a href="#">
<span>2</span>
</a>
</li>
<li>
<a href="#">
<span>3</span>
</a>
</li>
<li>
<a href="#">
<span>4</span>
</a>
</li>
<li>
<a href="#">
<span>5</span>
</a>
</li>
<li>
<a href="#">
<span>Next</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td width="100px">1</td>
<td width="300px">Lift Tours</td>
<td id="cellRow=0,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=0,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">2</td>
<td width="300px">Urpon Frisbee</td>
<td id="cellRow=1,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=1,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">3</td>
<td width="300px">Hoops </td>
<td id="cellRow=2,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=2,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">4</td>
<td width="300px">Go Fishing Ltd</td>
<td id="cellRow=3,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=3,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">5</td>
<td width="300px">Match Point Tennis</td>
<td id="cellRow=4,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=4,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">6</td>
<td width="300px">Fanatical Athletes</td>
<td id="cellRow=5,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=5,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">7</td>
<td width="300px">Aerobics valine Ky</td>
<td id="cellRow=6,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=6,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">8</td>
<td width="300px">Game Set Match</td>
<td id="cellRow=7,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=7,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">9</td>
<td width="300px">Pihtiputaan Pyora</td>
<td id="cellRow=8,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=8,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr><td width="100px">10</td>
<td width="300px">Just Joggers Limited</td>
<td id="cellRow=9,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=9,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">11</td>
<td width="300px">Keilailu ja Biljardi</td>
<td id="cellRow=10,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=10,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">12</td>
<td width="300px">Surf Lautaveikkoset</td>
<td id="cellRow=11,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=11,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">13</td>
<td width="300px">Biljardi ja tennis</td>
<td id="cellRow=12,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=12,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">14</td>
<td width="300px">Paris St Germain</td>
<td id="cellRow=13,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=13,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">15</td>
<td width="300px">Hoopla Basketball</td>
<td id="cellRow=14,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=14,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
<tr>
<td width="100px">16</td>
<td width="300px">Thundering Surf Inc.</td>
<td id="cellRow=15,cellColumn=2"><input type="button" class="EditButton MaintainButton" jqc-type="jqcButton" value="EDIT"></td>
<td id="cellRow=15,cellColumn=3"><input type="button" class="DeleteButton MaintainButton" jqc-type="jqcButton" value="DELETE"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
这个小型图书馆帮助：https://github.com/nheldman/jquery.scrollTableBody。只留下问题：＆＃34;我希望在页脚左侧看到项目，不仅在第一列中，而且根据需要选择尽可能多的列。＆＃34;