Как установить flex-direction для <td>элементов

Question

Это отрывок из функции рендеринга одного из моих компонентов, который является table:

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

Это <td> действует. Я ожидаю, что рендер будет выглядеть так: 50 % появляется в горизонтальном направлении. Вместо этого я получаю его в вертикальном направлении (50 выше %) из-за width: 100%.

Если бы это был не элемент <td>, я бы исправил проблему со свойством стиля flex-direction, но, поскольку <td> имеет display: table-cell, я не смог этого сделать.

Я пытался поместить детей <td> в div и установить там display: flex, но это убрало пробел между 50 и %.

Вопрос: Как сделать этот элемент данных таблицы таким, чтобы:

• Пробел между 50 и %
• Пусть они появятся в горизонтальном направлении
• Дочерний элемент <td> охватывает всю ячейку, заполняя всю ширину

Answer 1

Что решило проблему, вместо добавления отдельного <div> для числа (в данном случае 50), я добавил все элементы <td> в этот div:

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

Answer 2

Это раннее закрытие div?

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