如何为 <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> 的孩子包装到一个div 中并在那里设置display: flex，但它删除了50 和% 之间的空格。

问题：我怎样才能使这个表格数据元素：

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

Answer 1

解决问题的方法不是为数字（在本例中为 50）添加单独的 <div>，而是将所有 <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>
    ...
)