Menu
I am trying to centre each rows (<tr>) of a table.
I have an uneven number on a couple of rows.
Here is an example of my HTML:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</body>
</html>
At the moment the output is as shown below:
But I would like it to be like so:
If this can be achieved I would be very happy to know how it can be done.
984
example with regular tag (same structure)
div {
display:table;
border:solid 1px;
margin:auto;
}
p {
margin:0;
display:flex;
justify-content:center;
}
span {
margin:3px;
min-width:1em;
border:solid 1px;;
}<div>
<p>
<span> 1 </span>
<span> 2 </span>
<span> 3 </span>
<span> 4 </span>
<span> 5 </span>
<span> 6 </span>
</p>
<p>
<span> 7 </span>
<span> 8 </span>
<span> 9 </span>
<span> 10 </span>
<span> 11</span>
</p>
</div>
for INFOS only . the CSS for your table would be :
tr {
display:flex;
justify-content:center;
}
td {
min-width:1.5em;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
