[英]How to set flex-direction for <td> elements
This is the excerpt from the render function of one of my components, which is a table
: 这是我的一个组件的呈现功能的摘录,该组件是一张
table
:
return (
...
<td>
<div style={{ width: '100%' }}>50</div>
{' '}
<span className='percentage-sign'>%</span>
</td>
...
)
This <td>
is acting up. 此
<td>
正在起作用。 I expect a render to look this way: 50 %
appearing in horizontal direction. 我希望渲染看起来像这样:
50 %
出现在水平方向。 Instead, I get it in vertical direction ( 50
above %
), because of width: 100%
. 取而代之的是,由于
width: 100%
,所以我在垂直方向上得到它( %
上为50
)。
If it was not a <td>
element, I would have fixed the issue with flex-direction
style property, but since <td>
has display: table-cell
, I was not able to do so. 如果不是
<td>
元素,则可以使用flex-direction
样式属性解决该问题,但是由于<td>
具有display: table-cell
,所以我无法做到这一点。
I tried wrapping the children of <td>
into a div and setting display: flex
there, but it removed the space between the 50
and %
. 我尝试将
<td>
的子级包装到div中并设置display: flex
在那里,但是它删除了50
和%
之间的空间。
Question: How can I make this table data element to: 问题:如何使该表数据元素能够:
50
and %
50
和%
之间 <td>
span across the entire cell, filling the entire width <td>
的子<td>
跨整个单元格,占满整个宽度 What solved the issue is instead of adding a separate <div>
for a number (50 in this case), I added all the <td>
elements into that div: 解决此问题的方法不是为数字添加单独的
<div>
(在本例中为50),而是将所有<td>
元素添加到该div中:
return (
...
<td>
<div style={{ width: '100%' }}>
50
{' '}
<span className='percentage-sign'>%</span>
</div>
</td>
...
)
Is it the early closing of the div? 是div的早期关闭吗?
return (
...
<td>
<div style={{ width: '100%' }}>50</div>
{' '}
<span className='percentage-sign'>%</span>
</td>
...
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.