Search code examples
htmlcsshtml-tablecenter

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

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.

Solution

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