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

【问题标题】：Align left items in table but at the center对齐表格中的左侧项目但在中心
【发布时间】：2021-09-05 21:37:35
【问题描述】：

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

<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

【问题讨论】：

你不能。您链接到的示例不是一个真实的表格，或者更好地说：它 is 一个表格，但在该表格中只有一个行包含三个单元格。这些单元格包含具有display: flex 的divs，并形成“假列”。正如我所写，从语义上讲，这是一张只有一行的表格，因此例如对于屏幕阅读器或 SEO，它不能作为表格正常工作。一旦任何表格单元格的内容需要分成第二行，行布局（即边界线）就会中断（试试看）。
是的，我知道，我自己做了这个例子。我将使用省略号将中断修复到第二行，并在末尾添加“...”。我不关心屏幕阅读器或 sao，它只需要看起来像一个最终用户的表格，带有 cliquable 行。请看一下这个例子，我已经更新了它，它更干净了。实际上，我现在唯一需要的是使用 href 或其他东西使它成为 cliquable，但是如果没有 javascrit 怎么办......也许我现在真的需要 javascript
要“使其可点击”，您只需在每个可点击元素周围放置一个链接标签 (<a>...</a>)，然后调整该“表”内不同 a 标签的样式" 使用组合的 CSS 选择器和设置，如 text-decoration: none 、 color: [same as your regular text] 等。
是的，这是我能做的，但如果我不必为一行的每个单元格重复相同的链接会更好，它会创建一个更大的 html 文件，使用更大的带宽.. . 知道我会做什么
现在一些 THML 标签当然不计入带宽——复杂的 javascript 和 huge 样式表可以，但不是这个。

标签： html css html-table alignment

【解决方案1】：

您可以给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>

【讨论】：

是的，但这并非在所有情况下都有效，在这里您选择此填充以使其适用于东京-横滨。但我有来自数据库的字段，它可以是任意长度。桌子也可以是任何长度，东京-横滨应该仍然在中心
@LéoParent 我更新了我的答案。现在对你有用吗？

【解决方案2】：

您可以使用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,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>

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

【讨论】：

是的，但这并不是在所有情况下都有效，这里选择了 30px。其他列可能需要 30px 以外的其他值才能使最大的节拍居中。当表格调整大小时，它就坏了
@LéoParent 我刚刚更新了我的代码，请注意表格大小可以更改并且不会对填充产生任何影响
谢谢你，这要好得多，但并不完美。但这是我的错，它在我选择的例子中起作用。但我的真实数据来自数据库，可以是任意长度。在这种情况下，不太可能将左右填充的右 vw 值设置为每列的中心数据...
嗨@LéoParent，如果我的回答帮助您查看stackoverflow.com/help/someone-answers