Question

我正试图通过烧瓶展示一个庞大的数据集。不幸的是，表格下的页码不是同一行，而是每个页码都显示为无序列表。请参阅下面的屏幕截图以了解该问题。

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

Answer 1

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编写的有效示例，希望对您有所帮助。让我知道是否需要任何帮助

Answer 2

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

Answer 3

您可以通过多种方式将同一行中的元素对齐，我想做的是使用CSS Flex属性来管理项目之间的空间。

这是我使用css flex属性的解决方案：

.records {
      display: flex;
      justify-content: center;
    }
    
    .records a {
      margin: 14px;
      background-color: red;
      padding: 5px 10px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }

<div class="records">
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
    </div>

Answer 4

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

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

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

样式应该是

ul li {
 display: inline-block;
}

无法在同一行上显示页码

4 个答案: