我的 HTML 表格是这样的:
<table>
<tr>
<td>123 - 20 - 20</td>
</tr>
</table>
这些值是从数据库中检索的,因此显示如下图:https://imgur.com/g7tG2yr
如何使所有值(所有数字)保持一致? 谢谢
最佳答案
最好的办法是将每个“子字符串”(每个数字和运算符)格式化为它自己的表格单元格,并将 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>
关于html - 如何对齐和距离 td 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55479578/