html - 无法在同一行显示页码-6ren

html - 无法在同一行显示页码

转载作者：太空宇宙更新时间：2023-11-04 06:32:28

我正在尝试通过 Flask 呈现一个巨大的数据集。不幸的是，表格下方的页码不在同一行，而是每个页码都显示为无序列表。请引用以下屏幕截图了解问题。

页面的 html 如下所示:

{% extends "layout.html" %}

{% block content %}
<div>
    <table class='tableView'>
        <thead>
            <tr>                
                <th>{{ columnNames[0] }}</th>
                <th>{{ columnNames[1] }}</th>
                <th>{{ columnNames[2] }}</th>
                <th>{{ columnNames[3] }}</th>
                <th>{{ columnNames[4] }}</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td colspan='5'>
                    <div class='links'>
                        {{ pagination.links }}
                    </div>
                </td>
            </tr>
        </tfoot>

        <tbody>
            {% for record in records.values %}                
                <tr>
                    {% for index in range(5) %}
                        <td>{{ record[index] }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
<div>
{% endblock %}

CSS 看起来像这样:

div {
    text-align: center;
}

table.tableView {
    border: 1px solid #1C6EA4;
    background-color: #AEDBEE;
    width: 80%;
    text-align: center;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

table.tableView td, table.tableView th {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}

table.tableView tbody td {
    font-size: 13px;
}

table.tableView tr:nth-child(even) {
    background: #D0E4F5;
}

table.tableView thead {
    background: #1C6EA4;
    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    border-bottom: 2px solid #444444;
}

table.tableView thead th {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2px solid #D0E4F5;
}

table.tableView thead th:first-child {
    border-left: none;
}

table.tableView tfoot {
    font-size: 14px;
    font-weight: bold;
    color: #43443B;
    background: #D0E4F5;
    background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    border-top: 2px solid #313644;
}

table.tableView tfoot td {
    font-size: 14px;
}

table.tableView tfoot .links {
    text-align: center;
}

table.tableView tfoot .links a{
    display: inline-block;
    background: #246688
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
}

如何显示页码，使它们位于表格下方的同一行？

编辑一:生成的html结构如下:

<html>
    <head>
        <title>FetchDataAPI</title>
        <link rel='stylesheet' href="/static/css/main.css">
    </head>

    <body>
        <div>
            <table class='tableView'>
                <thead>
                    <tr>                
                        <th>BATCH_ID</th>
                        <th>CHAR_ID</th>
                        <th>BATCH_TIME</th>
                        <th>CHAR_NAME</th>
                        <th>CHAR_VALUE</th>
                    </tr>
               </thead>

        <tfoot>
            <tr>
                <td colspan='5'>
                    <div class='records'>
                        <ul class="pagination"><li class="previous disabled unavailable"><a> &laquo; </a></li><li class="active"><a>1</a></li><li><a href="/ip21data?page=2">2</a></li><li><a href="/ip21data?page=3">3</a></li><li><a href="/ip21data?page=4">4</a></li><li><a href="/ip21data?page=5">5</a></li><li class="disabled"><a>...</a></li><li><a href="/ip21data?page=51">51</a></li><li><a href="/ip21data?page=52">52</a></li><li class="next"><a href="/ip21data?page=2">&raquo;</a></li></ul>
                </div>
            </td>
        </tr>
    </tfoot>

    <tbody>
        <tr>                    
                    <td>86709.0</td>                    
                    <td>7786.0</td>                    
                    <td>01-JAN-14 08:43:19.0</td>                    
                    <td>START</td>                    
                    <td>LR 8986</td>                    
            </tr>
    </tbody>
</table>
<div>

</body>
</html>

最佳答案

table.tableView {
    border: 1px solid #1C6EA4;
    background-color: #AEDBEE;
    width: 80%;
    text-align: center;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

table.tableView td, table.tableView th {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}

table.tableView tbody td {
    font-size: 13px;
}

table.tableView tr:nth-child(even) {
    background: #D0E4F5;
}

table.tableView thead {
    background: #1C6EA4;
    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    border-bottom: 2px solid #444444;
}

table.tableView thead th {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2px solid #D0E4F5;
}

table.tableView thead th:first-child {
    border-left: none;
}

table.tableView tfoot {
    font-size: 14px;
    font-weight: bold;
    color: #43443B;
    background: #D0E4F5;
    background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    border-top: 2px solid #313644;
}

table.tableView tfoot td {
    font-size: 14px;
}

table.tableView tfoot .records {
    text-align: center;
}
table.tableView tfoot .records ul{
  margin:0;
}
table.tableView tfoot .records li{
  display:inline-block;
}
table.tableView tfoot .records a{
    display: inline-block;
    background: #246688;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
}

<div>
            <table class='tableView'>
                <thead>
                    <tr>                
                        <th>BATCH_ID</th>
                        <th>CHAR_ID</th>
                        <th>BATCH_TIME</th>
                        <th>CHAR_NAME</th>
                        <th>CHAR_VALUE</th>
                    </tr>
               </thead>

        <tfoot>
            <tr>
                <td colspan='5'>
                    <div class='records'>
                        <ul class="pagination"><li class="previous disabled unavailable"><a> &laquo; </a></li><li class="active"><a>1</a></li><li><a href="/ip21data?page=2">2</a></li><li><a href="/ip21data?page=3">3</a></li><li><a href="/ip21data?page=4">4</a></li><li><a href="/ip21data?page=5">5</a></li><li class="disabled"><a>...</a></li><li><a href="/ip21data?page=51">51</a></li><li><a href="/ip21data?page=52">52</a></li><li class="next"><a href="/ip21data?page=2">&raquo;</a></li></ul>
                </div>
            </td>
        </tr>
    </tfoot>

    <tbody>
        <tr>                    
                    <td>86709.0</td>                    
                    <td>7786.0</td>                    
                    <td>01-JAN-14 08:43:19.0</td>                    
                    <td>START</td>                    
                    <td>LR 8986</td>                    
            </tr>
    </tbody>
</table>
<div>

这是根据您的 html 编写的工作示例，希望对您有所帮助。如果需要任何帮助，请告诉我

关于html - 无法在同一行显示页码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54531962/

文章推荐： java - 在 GeoTools 中使用纬度经度绘制一条线

文章推荐： c++ - 无限循环录制字符串

文章推荐： python - 运行 spotify python 脚本时出错

文章推荐： Java读卡器乱码

Python 一行
我想要以下代码的 Python 单行解决方案，但是怎么做呢？ total = 0 for ob in self.oblist: total += sum(v.amount for v in o
一行 Python 代码轻松构建树状热力图
今天和大家一起学习一种可视化技术：构建树状热力图treemap。树形图易于可视化，且易于被人理解。树状图通过展示不同大小的矩形，以传达不同大小的数据量，一般认为，较大的矩形意味着占总体的一大部分，而较
if-statement - 一行 if 语句
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
Perl 一行 if 语句
我有一个声明 $set eq "Y" ? $set = "N" : $set = "Y"; 但不管它总是设置为 "N" # Toggle setting if ($set eq "Y") { $
PHP代码显示不正确[一行] EOL
当我尝试在我的服务器上上传一个 php 文件时，我收到一条消息:"Parse error: ..." 我知道这是什么意思，但问题是别的。如果我在本地服务器上编辑文件(我的计算机上安装了 XAMPP)
python - 一行 for 循环用于具有变量增量和二维列表搜索的二维列表
我是 python oneliner 循环的新手。我希望用户将数据输入到二维列表中，同时提醒他他们将输入的数据索引。我的代码是: flag=0 x=[[int(input("enter the "+
变量后面可以输出字符串吗？ (一行 printf)
尝试在变量之前和之后打印字符串。C 是否有能力使用一条语句来显示此输出？这有效: float value = 5; printf("\nThe value of %f", value); print
mysql - 一行/水平显示MySQL查询的输出
我正在验证我创建的 MySQL 数据库的结果，为此，我需要一些屏幕截图。例如，以下查询: select distinct run_ID from ngsRunStats_FK.failedRuns
一行 JavaScript 测试和赋值
有人可以解释一下这个 JS LINE 吗？数据是一个对象。 var list = data == null ? [] : (data.wine instanceof Array ? data.wine
一行 HTML 下拉列表
如何在一行中添加三个下拉菜单。我想把我的日、月和年放在一行中，但不能这样做。任何帮助将不胜感激。我附上我的 jsfiddle . .... 最佳
html 100%-(一行)
我正在尝试使用 html 将 iframe 的高度设置为 100%(我已成功完成)，但我还在顶部添加了一行额外的文本，所以它太高了 ~16px(这需要一个滚动条)。有没有办法更改 iframe 以显示
java - 将字符串数组写入文件 - 一行？
这是一个示例，我从文件中读取行作为字符串，以使整个文件作为字符串数组: String[] ArrayOfStrings = (new Scanner( new File("log.txt") ).us
c - 一行#if语句
我有一个包含大量定义的配置文件，用于在编译期间包含模块。此外，这意味着我必须经常检查代码内部的定义。每张支票需要 3 行，是否可以在一行中执行此操作。 #if FUNC_ENABLED functio
css - 水平列表不内联/一行
我正在尝试制作一个水平列表，其中每个列表中的 s 的高度为 385px，宽度为 400px。我尝试使用 inline-block 使列表水平排列，但这似乎不起作用。也就是说，我的意思是列表仍然是垂
一行 CSS，无法比较免费和付费主题文件
这很烦人，我有一个带有 css 文件的 wordpress 主题，所有内容都在一长行中。我想知道为什么有人会那样做。现在我已经升级了，我需要将旧文件与新文件进行比较，以便我可以接受更改。 Meld、d
python - 一行 for 循环并修改对象
我有一个对象数组，其中每个对象都有一个 search_order 属性。我要检查数组并将所有对象的属性增加 1这是简单的方法: res = [] for r in array: r.searc
linux - 移动文件并重命名 - 一行
我在某些服务器上遇到许多具有相同内容和相同名称的文件。我需要隔离这些文件进行分析，所以我不能只删除重复项。操作系统为Linux(centos和ubuntu)。我枚举文件名和位置并将它们放入文本文件中
Javascript 拼图 - 一行
你能在不抛出错误的情况下解决这个问题吗？答案是单线。这是来自一个死的职位发布，在回复中要求回答。我认为这是剔除受访者的聪明方法，但我似乎无法在不出错的情况下回答它。显而易见的解决方案: f.moo(
Java 一行 if 语句
这个问题在这里已经有了答案: Is it ok if I omit curly braces in Java? [closed] (16 个答案) 关闭 9 年前。我在 java 中使用没有大括号
python - 一行，三个变量
我在这里试图用 python 制作一个简单的计算器，我想知道是否可以在命令运行时将前 3 行合并为一行。我的意思是；我不必按 Enter 键来键入下一个数字/运算符，而是按空格键(在输入部分)。 wh

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 无法在同一行显示页码