表格页码位置问题答案

【问题标题】：Table page number position problems表格页码位置问题
【发布时间】：2017-11-26 14:57:31
【问题描述】：

我在表格页脚中显示页码时遇到问题。这是我的 PHP 代码

<tfoot>
    <tr>
        <th colspan="5">Page</th>
            ?php 
            $sql = "SELECT COUNT(ID) AS total FROM Settings";
            $result = $conn->query($sql);
            $row = $result->fetch_assoc();
            $total_pages = ceil($row["total"] / $results_per_page); // calculate total pages with results
            for ($i=1; $i<=$total_pages; $i++) {  // print links for all pages
                 echo "<th> <a href='example.php?page=".$i."'";
              if ($i==$page)  echo " class='curPage' </th>";
                 echo ">".$i."</a> </th>"; 
              }; 
            ?>
    </tr>
</tfoot>

CSS：

body {
    font-size: 15px;
    color: #343d44;
    font-family: "segoe-ui", "open-sans", tahoma, arial;
    padding: 0;
    margin: 0;
}
table {
    margin: auto;
    font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
    font-size: 12px;
}
h1 {
    margin: 25px auto 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
}
table td {
    transition: all .5s;
}
/* Table */
.data-table {
    border-collapse: collapse;
    font-size: 14px;
    min-width: 537px;
}
.data-table th, 
.data-table td {
    border: 1px solid #e1edff;
    padding: 7px 4px;
}
.data-table caption {
    margin: 7px;
}
/* Table Header */
.data-table thead th {
    background-color: #508abb;
    color: #FFFFFF;
    border-color: #6ea1cc !important;
    text-transform: uppercase;
}
/* Table Body */
.data-table tbody td {
    color: #353535;
}
.data-table tbody td:first-child,
.data-table tbody td:nth-child(4),
.data-table tbody td:last-child {
    text-align: right;
}
.data-table tbody tr:nth-child(odd) td {
    background-color: #f4fbff;
}
.data-table tbody tr:hover td {
    background-color: #ffffa2;
    border-color: #ffff0f;
}
/* Table Footer */
.data-table tfoot th {
    background-color: #e5f5ff;
    text-align: right;
}
.data-table tfoot th:first-child {
    text-align: left;
}
.data-table tbody td:empty{
    background-color: #ffcccc;
}

这是图片

如何做到这一点？如何使所有页码适合表格页脚的末尾？

【问题讨论】：

你有解决办法吗？

标签： php css html-table

【解决方案1】：

您只需从 for 循环中删除 th 标记。并在th 标签内回显页面编号，并在编号之间留出一些空间。请用下面给定的代码替换您的代码。

这适用于您的情况。

<tfoot>
        <tr>
            <th colspan="5">Page</th>
                            <?php 
                             $sql = "SELECT COUNT(ID) AS total FROM Settings";
                             $result = $conn->query($sql);
                             $row = $result->fetch_assoc();
                             $total_pages = ceil($row["total"] / $results_per_page); // calculate total pages with results
                             echo "<th>";
                             for ($i=1; $i<=$total_pages; $i++) {  // print links for all pages
                                  echo "  &nbsp; <a href='example.php?page=".$i."'";
                               if ($i==$page)  echo " class='curPage' </th>";
                                  echo ">".$i."</a> &nbsp;"; 
                               }; 
                              echo "</th>";
                             ?>
        </tr>
    </tfoot>

【讨论】：