w0ns88 w0ns88 - 5 months ago 8
CSS Question

Is it possible to centre each row / tr in a table? HTML & CSS

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:

enter image description here

But I would like it to be like so:

enter image description here

If this can be achieved I would be very happy to know how it can be done.

Thanks in advance!

Answer

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;
}
Comments