我正在尝试通过 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> « </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">»</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> « </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">»</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/