由table布局引起的问题

1，前提：

<tr className={classnames(style['expanded-tr'], item.isOpen ? '': 'hide')}>
    <td colSpan="2">{item.typeDesc}</td>
    <td colSpan="2"><a href={Bloks_URL+item.txId} target="_blank">{item.txId}</a></td>
    <td colSpan="2">{item.status}</td>
</tr>

这是一个table布局，红色框内是当前行可以展开的数据，通过 item.isOpen 控制。

2，问题

因为table布局的原因，每一列会自动适应宽度，

td 有一个属性，可以控制它占的列数，<td colSpan="2"> ，但这是基于其他行的宽度。

而且，如果自己这个td的内容太长，因为table自适应的问题，又会影响其他正常行的宽度。

3，解决

因为table布局中，标签都是固定的，table>tbody>tr>td，在td中才可以写其他的标签，

所以在该例中，可以直接设置 <td colSpan="6"> ，占满整行，在写其他的div，同时也不会影响到其他行。

<tr className={classnames(style['expanded-tr'], item.isOpen ? '': 'hide')}>
    <td key={item.key} colSpan="6">
        <div>
            <span>{item.typeDesc}</span>
            <span><a href={Bloks_URL+item.txId} target="_blank">{item.txId}</a></span>
            <span>{item.status}</span>
        </div>
    </td>
</tr>