PHP CSS table page number position problems : I have a problem with page numbers showing in footer on table here is my PHP CODE

		<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>



<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    	<style type="text/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;
    		}
    	</style>

<!-- end snippet -->

[Here is image what it s look:][1]


  [1]: https://i.stack.imgur.com/am1lK.png

Ok now my question is How to Make this right? How to fit all pages numbers to end of table footer? Thanks for advices 