Как переместить изображение слева от текста в столбце таблицы в интерфейсе материалов?

Question

Я пытался возиться со встроенными стилями, чтобы переместить изображения только влево от текста в определенном столбце, но для некоторых строк изображения перекрываются или текст слишком далеко вправо, как это можно видеть в это изображение:

https://i.stack.imgur.com/QddSC.png

 <TableCell align="right" > <Avatar src={n.image} style={{width: 25, height: 25, position: 'absolute'  }}/> <span style={{color: '#0066ff', cursor: 'pointer' }} >{n.name}</span> </TableCell>

Кто-нибудь знает, как переместить изображение только слева от текста и исправить эти пробелы и проблемы с перекрытием спасибо.

Answer 1

Попробуйте следующий код ::

<TableCell align="right" > 
    <Avatar src={n.image} style={{width: 25, height: 25, display: 'inline-block', vertical-align: 'top'  }}/> 
    <span style={{color: '#0066ff', cursor: 'pointer',  display: 'inline-block', vertical-align: 'top', width: 'calc(100% - 35px)' }} >{n.name}</span> 
</TableCell>