Table 列对齐 CSS

Question

我以 e-pub 格式编辑 e-books。我使用 CSS 来排版。我遇到了 table 列对齐问题，但我不知道如何处理它。 table 每列都有文本标题，然后是单元格的数字内容。列宽由标题设置，这使得在某些情况下列与单元格内容相比非常宽。

我想 right-align 将列中的数字保留到最后一位。但我希望将它们放置在更多列的中心。 "text-align: right" 命令将单元格右侧的数字对齐。有没有一种方法可以将所有数字向中心移动，同时将它们全部 right-aligned 到最后一位数字？

Answer 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>

Table 列对齐 CSS

Table column alignment CSS

css

text-align

tabular

epub