html - 如何为 <td> 元素设置 flex-direction

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> 的 child 进入一个 div 并设置 display: flex那里，但它删除了 50 之间的空间和 % .

问题:如何使这个表格数据元素:

• 50 之间有一个空格和 %
• 让它们出现在水平方向
• 有一个 <td> 的 child 跨越整个单元格，填满整个宽度

Answer 1

解决问题的方法不是添加单独的 <div>对于一个数字(在本例中为 50)，我添加了所有 <td>该 div 中的元素:

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