How to set flex-direction for <td> elements

Question

This is the excerpt from the render function of one of my components, which is a table :

   return (
        ...
        <td>
           <div style={{ width: '100%' }}>50</div>
           {' '}
           <span className='percentage-sign'>%</span>
        </td>
        ...
    )

This <td> is acting up. I expect a render to look this way: 50 % appearing in horizontal direction. Instead, I get it in vertical direction ( 50 above % ), because of width: 100% .

If it was not a <td> element, I would have fixed the issue with flex-direction style property, but since <td> has display: table-cell , I was not able to do so.

I tried wrapping the children of <td> into a div and setting display: flex there, but it removed the space between the 50 and % .

Question: How can I make this table data element to:

• Have a space between 50 and %
• Have them appear in a horizontal direction
• Have the child of a <td> span across the entire cell, filling the entire width

Answer 1

What solved the issue is instead of adding a separate <div> for a number (50 in this case), I added all the <td> elements into that div:

   return (
    ...
    <td>
       <div style={{ width: '100%' }}>
          50
          {' '}
          <span className='percentage-sign'>%</span>
       </div>
    </td>
    ...
)

Answer 2

Is it the early closing of the div?

return (
    ...
    <td>
       <div style={{ width: '100%' }}>50</div>
       {' '}
       <span className='percentage-sign'>%</span>
    </td>
    ...
)