Html 如何为元素设置弯曲方向

这是我的一个组件的render函数的摘录，它是一个表：

这是出了问题。我希望渲染看起来是这样的：50%出现在水平方向上。相反，我得到的是垂直方向50%以上，因为宽度：100%

如果它不是一个元素，我会修复flex-direction样式属性的问题，但由于有display:table-cell，所以我无法这样做

我尝试将的子对象包装到一个div中，并在那里设置display:flex，但它删除了50%和100%之间的空间

问题：如何使此表数据元素：

有一个介于50%和50%之间的空间 让它们以水平方向出现 让跨度的子元素穿过整个单元格，填充整个宽度

---

这是部门提前关门吗

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

---

解决此问题的方法不是为数字50添加单独的元素，而是将所有元素添加到该div中：

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

---

不。div只用于数字50。但是它在style属性之前关闭div？我看了你的代码摘录，所以没有看到拼写错误。现在纠正了，好吧，这让我很困惑，所以这不是我看到的问题：Sry

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