É possível remover de alguma forma o espaço vazio no segundo item da lista?
tentei
li > table:first-child { display: inline-table }
mas então xyz
o texto se move para o lado direito da tabela, enquanto deveria ficar abaixo dela.
Além disso, não posso alterar o HTML.
<ul>
<li>list item one</li>
<li>
<table>
<tr>
<td>list</td>
<td>item</td>
<td>two</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
</table>
xyz
<li>list item trree</li>
</ul>
Você está lidando com uma combinação de
border-spacing
na mesa e preenchimento dostd
elementos.As palavras
list item one
têm a largura de um caractere de espaço entre elas - fazer com que corresponda à segunda linha, usando uma combinação de espaçamento de borda e preenchimento de célula, é bastante complicado.Provavelmente é melhor se você fizer com que a tabela e as linhas da tabela sejam elementos de bloco e as células da tabela sejam blocos embutidos.