html - 如何创建带页脚的响应式表格-6ren

html - 如何创建带页脚的响应式表格

转载作者：行者123 更新时间：2023-11-28 02:39:03

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

Sample Image

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

文章推荐： c++ - 确保以普通类型 move 标准 vector

文章推荐： javascript - 进度条达到 100% 时未提交表单

SQL ORDER BY 带 CASE 带 UNION ALL
运行 PostgreSQL(7.4 和 8.x)，我认为这是可行的，但现在我遇到了错误。我可以单独运行查询，它工作得很好，但如果我使用 UNION 或 UNION ALL，它会抛出错误。这个错误:
java - 带 fragment 的抽屉导航(带 ViewPager)重新打开时消失
我试图为我的应用程序创建一个导航，使用抽屉导航我的 fragment 之一(HomeFragment)有一个 ViewPager，可容纳 3 个 fragment (Bundy Clock、Annou
android - 带 Activity 的抽屉导航和。带 fragment 的抽屉导航
以我目前正在开发的应用为例: - 它有一个包含多个项目的抽屉导航；现在有两个项目让我感兴趣，我将它们称为 X 和 Y。 X 和 Y 都在单击时显示包含 x 元素或 y 元素列表的 fragment 选
python - 如何将形状为(带、行、列)的数组重新整形为(行、列、带)？
我有一个形状为 (370,275,210) 的 NumPy 数组，我想将其重新整形为 (275,210,370)。我将如何在 Python 中实现这一点？ 370是波段数，275是行数，210是图像包
iphone - 无法与具有子 UIViewController(带 NIB)的父 UIViewController(带 NIB)交互
我们如何与被子 UIViewController 阻止的父 UIViewController(具有按钮)交互。显然，触摸事件不会通过子 Nib 。 (启用用户交互) 注意:我正在加载默认和自定义 NI
java - storeedProcedure.registerStoredProcedureParameter，带 out Parameter ref 光标，带 Jpa Eclipse Link
我是 Jpa 新手，我想执行过程我的代码如下 private static final String PERSISTENCE_UNIT_NAME = "todos"; private static
google-compute-engine - 带 LAMP 的 GCE VS 带 Cloud SQL 的 GCE
与安装了 LAMP 的 GCE 相比，选择与 Google Cloud SQL 链接的 GCE 实例有哪些优势？我确定 GCE 是可扩展的，但是安装在其上的 mysql 数据库的可扩展性如何？使用
带*点和不带指针的Golang类型方法？
这个问题在这里已经有了答案: Value receiver vs. pointer receiver (3 个答案) 关闭 3 年前。我刚接触 golang。只是想了解为 Calc 类型声明的两种
R - 日期和分界线的快捷方式，带# -----
我不小心按了一个快捷键，一个非常漂亮的断线出现在日期上。有点像 # 23 Jun 2010 -------------------- 有人知道有问题的快捷方式吗？？ (我在 mac 上工作!) 在
scala - 带$和字符串插值的Scala正则表达式
我正在Scala中编写正则表达式 val regex = "^foo.*$".r 这很好，但是如果我想做 var x = "foo" val regex = s"""^$x.*$""".r 现在我们有
带/不带命名空间的 XML
以下 XML 文档在技术上是否相同？ James Dean 19 和: James Dean 19 最佳答案这两个文档在语义上是相同的。在 X
带 lapply 的稳健线性回归
我在对数据帧列表运行稳健的线性回归模型(使用 MASS 库中的 rlm)时遇到问题。可重现的示例: var1 <- c(1:100) var2 <- var1*var1 df1 <- data.f
iphone - 带 $ 符号的自定义数字键盘
好的，我有一个自定义数字键盘，可以在标签(numberField)中将数字显示为 0.00，现在我需要它显示 $0.00。 NSString *digit = sender.currentTitle;
macos - 带 Storyboard的基于文档的应用程序自动保存
在基于文档的应用程序中，使用 XIB 文件，创建新窗口时其行为是: 根据最后一个事件的位置进行定位和调整大小 window 。如果最后一个事件窗口仍然可见，则新窗口窗口应该是级联的，这样它就不会直
sql - 带 in 子句的查询中的参数？
我想使用参数进行查询，如下所示: SELECT * FROM MATABLE WHERE MT_ID IN (368134, 181956) 所以我考虑一下 SELECT * FROM MATABLE
sql - 带/不带参数的性能问题
我遇到一些性能问题。我有一个大约有 200 万行的表。 CREATE TABLE [dbo].[M8]( [M8_ID] [int] IDENTITY(1,1) NOT NULL,
javascript - 带 (+) 键的按键功能不起作用
我在 jquery 中的按键功能遇到问题。我不知道为什么按键功能不起作用。我已经使用了正确的 key 代码。在我的函数中有 2 个代码，其中包含 2 个事件键，按一个键表示 (+) 代码 107 和(
android - 带.raw输入的音频波形
我想显示音频波形，我得到了此代码，它需要.raw音频输入并显示音频波形，但是当我放入.3gp，.mp3音频时，我得到白噪声，有人可以帮助我如何使其按需与.3gp一起使用使用.3gp音频运行它。 Inp
php - 带$的stristr
我无法让 stristr 函数返回真值，我相信这是因为我的搜索中有一个 $ 字符。当我这样做时: var_dump($nopricecart); 完整的 $nopricecart 值是 $0 ，我得
algorithm - 带 If 语句的循环的时间复杂度
如果我有这样的循环: for(int i=0;i O(n) 次。所以do some执行了O(n)次。如果做某事是线性时间，那么代码片段的复杂度是O(n^2)。关于algorithm - 带 If 语

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何创建带页脚的响应式表格