如何为设置弹性方向 <td> 分子

Question

这是我的一个组件的呈现功能的摘录，该组件是一张table ：

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

此<td>正在起作用。 我希望渲染看起来像这样： 50 %出现在水平方向。 取而代之的是，由于width: 100% ，所以我在垂直方向上得到它（ %上为50 ）。

如果不是<td>元素，则可以使用flex-direction样式属性解决该问题，但是由于<td>具有display: table-cell ，所以我无法做到这一点。

我尝试将<td>的子级包装到div中并设置display: flex在那里，但是它删除了50和%之间的空间。

问题：如何使该表数据元素能够：

• 空格介于50和%之间
• 让它们水平出现
• <td>的子<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>
    ...
)