如何创建带页脚的响应式表格答案

【问题标题】：How to create responsive table with footer如何创建带页脚的响应式表格
【发布时间】：2018-04-26 03:25:49
【问题描述】：

我想创建一个带页脚的响应式表格。现在我正在使用标签但我面临页脚问题。它无法在不同的屏幕尺寸上正确显示。页脚应固定在页面底部。如果用户尝试调整页面大小，它应该在这种情况下显示滚动，底部有页脚。

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

【问题讨论】：

查看这个答案stackoverflow.com/q/2971401/8932624
你的css在哪里？
你需要在<tfoot>中使用<tr></tr>
参考这个 - datatables.net/examples/advanced_init/footer_callback.html
简要解释问题。

标签： html css

【解决方案1】：

在此处查看更新的<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>

我在这里也使用了引导程序，这对于响应式设计很有用。

【讨论】：

谢谢图沙尔。但我需要始终将页脚放在底部，尽管计数数量很多。即使我尝试添加空白行来解决响应性问题
在这里，页脚将始终粘在表格底部，您将根据需要在<tbody> 中添加新行。
有什么方法可以像我附加的示例图像一样将页脚始终粘贴到底部
检查更新的代码，现在使用页面<footer>而不是<tfoot>
@Tushar Walzade 也许你可以帮助我。看看这个：stackoverflow.com/questions/58312493/…