文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在同一行上显示页码

问无法在同一行上显示页码
EN

Stack Overflow用户

提问于 2019-02-05 10:10:39

回答 3查看 111关注 0票数 0

我正试图通过烧瓶展示一个巨大的数据集。不幸的是，表下的页码不是同一行的，而是显示为无序列表的每个页码。请参考下面的截图。

页面的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;
}

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

编辑1:生成的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>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-02-05 11:14:17

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，希望它有帮助。如果需要帮助，请告诉我

票数 1

Stack Overflow用户

发布于 2019-02-05 10:14:57

您试过使用Bootstrap分页类- https://getbootstrap.com/docs/4.1/components/pagination/吗？

票数 0

Stack Overflow用户

发布于 2019-02-05 10:25:20

从图片中可以看出，您已经在分页链接中列出了项目，并且可以为其编写样式。

所以基本上你有这样的东西

<ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
</ul>

风格应该是

ul li {
 display: inline-block;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54531962

复制

相似问题

问无法在同一行上显示页码
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在同一行上显示页码EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在同一行上显示页码
EN