表格列对齐CSS [重复]答案

【问题标题】：Table column alignment CSS [duplicate]表格列对齐CSS [重复]
【发布时间】：2016-06-30 00:36:21
【问题描述】：

我以 e-pub 格式编辑电子书。我使用 CSS 来进行书籍布局。我遇到了表格列对齐问题，我不知道如何处理它。该表具有每列的文本标题，然后是单元格的数字内容。列宽由标题设置，在某些情况下，与单元格内容相比，这使得列非常宽。

我想将列中的数字右对齐到它们的最后一位。但我希望它们更多地放置在列的中心。 “text-align: right”命令将单元格右侧的数字对齐。有没有办法将所有数字移向中心，同时保持它们都与最后一位数字右对齐？

【问题讨论】：

您能否发布您已经拥有的代码，以便我们知道您目前的目标是什么？另外，我用数字查看您的请求的方式是假设您有“左、左中、中、右中和右”，您希望数字在右中对齐。我说的对吗？

【解决方案1】：

这里有一些可能对你有用的方法

table {
  width: 400px;
  border: 1px solid gray;
}
td {
  text-align: center;
  border: 1px solid gray;
  width: 33%;
}
span {
  display: inline-block;
  width: 40%;
  background: #eee;
  text-align: right;
}

<table>
  <tr>
    <td>
      <span>
        nr 1
      </span>
    </td>
    <td>
      <span>
        nr 12
      </span>
    </td>
    <td>
      <span>
        nr 123
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>
        nr 123
      </span>
    </td>
    <td>
      <span>
        nr 12
      </span>
    </td>
    <td>
      <span>
        nr 1
      </span>
    </td>
  </tr>
</table>

示例 2

table {
  width: 400px;
  border: 1px solid gray;
}
td {
  text-align: center;
  border: 1px solid gray;
  width: 33%;
}
span {
  display: inline-block;
  width: 50%;
  background: #eee;
  text-align: right;
}
span span {
  float: left;
  text-align: left;
}

<table>
  <tr>
    <td>
      <span>
        <span>
          id
        </span>
        1
      </span>
    </td>
    <td>
      <span>
        <span>
          cnt
        </span>
        12
      </span>
    </td>
    <td>
      <span>
        <span>
          code
        </span>
        123
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span>
        <span>
          code
        </span>
        123
      </span>
    </td>
    <td>
      <span>
        <span>
          cnt
        </span>
        12
      </span>
    </td>
    <td>
      <span>
        <span>
          id
        </span>
        1
      </span>
    </td>
  </tr>
</table>

【讨论】：