CSS：居中表格列，但将内容与列中块内的左侧对齐

Question

我正在尝试跨多个单元格和行对齐表格列中的内容，使它们成为居中块，然后在该块内左对齐。

我已经找到了如何在 div 内执行此操作，但是有没有办法在表中的多行和多列中执行此操作？

以下是如何在 div 中执行此操作。 https://stackoverflow.com/a/31643221

第一个图像是正常中心，第二个图像在块内居中。

Answer 1

向表中添加更多行，以查看多行之间的对齐方式是否一致：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

.center-column {
  text-align: center;
}

.left-align-content {
  display: inline-block;
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="center-column">
        <div class="left-align-content">
          Centered Content<br>
          Line 2 of Content
        </div>
      </td>
      <td>Left-aligned Content</td>
      <td>Left-aligned Content</td>
    </tr>
    <tr>
      <td class="center-column">
        <div class="left-align-content">
          Another Centered Content<br>
          More Content
        </div>
      </td>
      <td>Left-aligned Content</td>
      <td>Left-aligned Content</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

Answer 2

要使表格列居中，同时将内容在列中的块内向左对齐，您可以使用 CSS 来定位特定列中的元素并应用适当的样式。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

.center-column {
  text-align: center; /* Center the content in the column */
}

.center-column > div {
  display: inline-block;
  text-align: left; /* Align the content inside the block to the left */
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="center-column">Centered Content</td>
      <td>Left-aligned Content</td>
      <td>Left-aligned Content</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>