How to center each td in tr?

Question

I would like to center each table cell's content, so it will give the impression that whole table row takes full width, because now it looks looks like it has 90%.

Also it looks like each td would have text-align: left.

table {
  margin: 10px 0px;
}

.item {
  border: 1px solid #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: table;
  font-size: 16px;
}

.item>div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.mobile {
  display: table;
}

.mobile tr {
  text-align: center;
  margin: auto;
}

.item {
  margin: 5px;
}

<table class='mobile' style="width: 100%; margin-top: 10px; table-layout:fixed;">
  <tr style="width: 100%;">
    <td colspan="2">
      <div class="item">
        <div>0</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>2</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>4</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>6</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>8</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>10</div>
      </div>
    </td>
  </tr>
  <tr style="width: 100%;">
    <td></td>
    <td colspan="2">
      <div class="item">
        <div>1</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>3</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>5</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>7</div>
      </div>
    </td>
    <td colspan="2">
      <div class="item">
        <div>9</div>
      </div>
    </td>
    <td></td>
  </tr>
</table>

Also if u prefer fiddle, Here's the link:

https://jsfiddle.net/xg3j01ew/11/

This looks like a questionable use of a table to begin with. Why not flexbox or grid? — isherwood, Sep 21 '21 at 12:41
Cuz I am working on email template where is super low support for modern styles methods like grid flex position pseudoclasses etc — ProteinDev, Sep 21 '21 at 12:43
`.item {margin: 5px;}` try replacing it with this `.item {margin: 5px auto;}` this will center the div horizontally — Vitorino fernandes, Sep 21 '21 at 12:43
I'm not sure I understand. The content _is_ centered. Are you saying that you want the outer edges of the first and last cells' contents to align? That's very different than centering. I don't think you'll accomplish it with a table. — isherwood, Sep 21 '21 at 12:44

How to center each td in tr?

0 Answers0