我想创建一个带页脚的响应式表格。现在我正在使用标签，但我面临页脚问题。它不能在不同的屏幕尺寸上正确显示。页脚应固定在页面底部。如果用户尝试调整页面大小，在这种情况下它应该显示滚动，底部有页脚。
<div class="container">
<table class="tablelog">
<thead id="thead">
<tr >
<th ><div style="width:15px;"></div></th>
<th ><div id="div-style">Column 1</div></th>
<th ><div id="div-style">Column 2</div></th>
<th ><div id="div-style">Column 3</div></th>
<th id="last-column"><div >Column 4</div></th>
</tr>
</thead>
<tbody id="tbody">
<tr class="active">
<td style="padding-right:15px;"><div class="triangleright"></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr><tr>
<td style="padding-right:15px;"><div></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr><tr>
<td style="padding-right:15px;"><div></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
</tbody>
<tfoot >
<div id="page-selector-control">
<div id="pageselectorButtonContainr">
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png"></button>
</div>
<div class="pager-control">
<div id="pagerdevidercontainer">
<div id="pagerdeviderdivfirst"></div>
<div id="pagerdeviderdivsecond"></div>
</div>
<label >Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label >of</label>
<label > </label>
<label >1</label>
</div>
</div>`enter code here`
</tfoot>
</table>
</div>
最佳答案
查看更新 <tfoot>这里 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table tablelog">
<thead id="thead">
<tr>
<th>
<div style="width:15px;"></div>
</th>
<th>
<div id="div-style">Column 1</div>
</th>
<th>
<div id="div-style">Column 2</div>
</th>
<th>
<div id="div-style">Column 3</div>
</th>
<th id="last-column">
<div>Column 4</div>
</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="active">
<td style="padding-right:15px;">
<div class="triangleright"></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
<tr>
<td style="padding-right:15px;">
<div></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
<tr>
<td style="padding-right:15px;">
<div></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<th></th>
<th colspan=3>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png">1</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png">2</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png">3</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png">4</button>
</th>
<th colspan=1>
<label>Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label>of</label>
<label> </label>
<label>1</label>
</th>
</tr>
</tfoot> -->
</table>
</div>
</div>
</body>
<footer style="position: fixed;bottom: 0px;" class="col-xs-12">
<div id="pageselectorButtonContainr" class="col-xs-6">
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png"></button>
</div>
<div class="pager-control col-xs-6 pull-right">
<label>Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label>of</label>
<label> </label>
<label>1</label>
</div>
</footer>
</html>我在这里也使用了 bootstrap，这对响应式设计很有用。
关于html - 如何创建带页脚的响应式表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47264459/