html - 如何对齐和距离 td 值

Question

我的 HTML 表格是这样的:

<table>
  <tr>
    <td>123 - 20 - 20</td>
  </tr>
</table>

这些值是从数据库中检索的，因此显示如下图:https://imgur.com/g7tG2yr

如何使所有值(所有数字)保持一致？谢谢

Answer 1

最好的办法是将每个“子字符串”(每个数字和运算符)格式化为它自己的表格单元格，并将 text-align: center 应用于每个单元格。这将使所有内容都居中对齐，无论数字有多少位。

td {
  text-align: center;
}

<table>
  <tr>
    <td>27.082</td>
    <td> - </td>
    <td>5</td>
    <td> - </td>
    <td>5</td>
  </tr>
  <tr>
    <td>3.905</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>2</td>
  </tr>
  <tr>
    <td>13.602</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td> - </td>
    <td>0</td>
    <td> - </td>
    <td>1</td>
  </tr>
  <tr>
    <td>43715</td>
    <td> - </td>
    <td>513</td>
    <td> - </td>
    <td>312</td>
  </tr>
</table>

有很多数字，您可以看到所有内容仍然保持对齐:

td {
  text-align: center;
}

<table>
  <tr>
    <td>27.082</td>
    <td> - </td>
    <td>5</td>
    <td> - </td>
    <td>5</td>
  </tr>
  <tr>
    <td>3.905</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>2</td>
  </tr>
  <tr>
    <td>13.602</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td> - </td>
    <td>0</td>
    <td> - </td>
    <td>1</td>
  </tr>
  <tr>
    <td>43750311251242145</td>
    <td> - </td>
    <td>5313451413</td>
    <td> - </td>
    <td>31434132</td>
  </tr>
</table>