对齐表格中的左侧项目但在中心

如何解决对齐表格中的左侧项目但在中心

这是一个简单的表格，宽度固定：

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>City</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tokyo-Yokohama</td>
      <td>37,843,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jakarta</td>
      <td>30,539,000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Delhi</td>
      <td>24,998,000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Manila</td>
      <td>24,123,000</td>
    </tr>
  </tbody>
</table>

如何将它们之间的项目与左侧对齐，但最大的（东京-横滨）在中心，如下图所示：

我正在寻找一种解决方案，而无需在其他项目上指定固定的 padding-left，并且无论表格的宽度如何，它都应该可以工作。

这是我正在寻找的行为示例，但具有更清晰的 html：https://codepen.io/ired4321/pen/abJrYWY?editors=1100

解决方法

您可以给 td 一个填充以在边缘留出一点空间，因此 Tokyo-Yokohama 位于中间，其余位于左侧。您可以删除边框。我添加它们只是为了显示示例

代码如下：

table {
  border-spacing: 0 0; /* to reduce border spaces */
}

.center {
  text-align: center;
}

td {
  padding: 0.5em 2em;
  border: 1px solid;
}

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>City</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="center">Tokyo-Yokohama</td>
      <td>37,843,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jakarta</td>
      <td>30,539,000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Delhi</td>
      <td>24,998,000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Manila</td>
      <td>24,123,000</td>
    </tr>
  </tbody>
</table>

,

您可以使用 padding-left 和 padding-right 来模仿您在照片中的相同效果

td {
    padding-left: 5vw;
    padding-right: 5vw;
}

table,th,td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>City</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tokyo-Yokohama</td>
      <td>37,000</td>
    </tr>
  </tbody>
</table>

更新：，您可以使用 vw 代替固定像素值，并使其控制相对于视口宽度的 1% 的百分比，但是我建议将它作为我之前在 px 填充中的答案可以是一个固定值，因为它不会受到表格大小的影响。