This is a snippet from the render function of one of my components, showcasing a table:
return (
...
<td>
<div style={{ width: '100%' }}>50</div>
{' '}
<span className='percentage-sign'>%</span>
</td>
...
)
The alignment of this <td> isn't quite right. I want to see it displayed horizontally as 50 %. However, due to the width: 100%, it's currently displaying vertically with 50 above %.
If this wasn't a <td> element, I could easily address this by using the flex-direction CSS property. Unfortunately, because <td> has display: table-cell, that solution doesn't work.
I attempted wrapping the contents of the <td> in a div and applying display: flex, but this resulted in the space between 50 and % disappearing.
Question: How can I modify this table data element to achieve the following:
- Add a space between
50and% - Show them horizontally
- Cover the entire cell width so that the content spans across entirely