Question

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

没有空格的</td><td>和空格的</td> <td>被解释不同，后者在渲染时有额外的空间，导致两者之间不对齐。
除了上述内容之外，justify文本会导致不同</td> <td>行之间对齐的额外变化，具体取决于行上每个空格的填充量。

如何使用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大小。你可以写这样的东西。

＆＃13;

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;}*/

＆＃13;

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

＆＃13;

摆脱内联块和内联元素之间的空间

1 个答案: