如何為設置彈性方向 <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>
    ...
)