去掉内联块和内联元素之间的空间

Question

作为CSS3: inline TABLE TD columns, but keep it aligned 的潜在解决方案，我有以下 CSS，但它有两个问题：

1. 没有空格的</td><td> 和有空格的</td> <td> 的解释不同，后者在渲染时有一个额外的空格，导致两者之间不对齐。

1234563李>

如何使用 CSS 删除这个多余的空间，或者至少，即使使用 justify，也可以使其显示一致？

table {text-align: justify; width: 4em; font-size: 32pt;}

td:nth-child(1) {display: inline-block; min-width: 2em;}

td:nth-child(2) {display: inline;}

/*tr {text-align: left;}*/

<table>
  <tr><td>1</td><td>d d f s d x z</td></tr>
  <tr><td>2</td><td>dd f sdxz</td></tr>
  <tr><td>3</td><td>ddf sdxz</td></tr>
  <tr><td>4</td> <td>d d f s d x z</td></tr>
  <tr><td>5</td> <td>dd f sdxz</td></tr>
  <tr><td>6</td> <td>ddf sdxz</td></tr>
</table>

Answer 1

您可以将 tr 中的字体设置为 0 大小，而 td 之间的空间也将具有 0 大小。你可以写这样的东西。

table {text-align: justify; width: 4em; font-size: 32pt;}

tr {font-size: 0;}

td {font-size: 32pt;}

td:nth-child(1) {display: inline-block; min-width: 2em;}

td:nth-child(2) {display: inline;}

/*tr {text-align: left;}*/

<table>
  <tr><td>1</td><td>d d f s d x z</td></tr>
  <tr><td>2</td><td>dd f sdxz</td></tr>
  <tr><td>3</td><td>ddf sdxz</td></tr>
  <tr><td>4</td> <td>d d f s d x z</td></tr>
  <tr><td>5</td> <td>dd f sdxz</td></tr>
  <tr><td>6</td> <td>ddf sdxz</td></tr>
</table>