由table布局引发的问题

时间 2019-12-07

标签 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 控制。 bash

2，问题

由于table布局的缘由，每一列会自动适应宽度，ide

td 有一个属性，能够控制它占的列数，<td colSpan="2"> ，但这是基于其余行的宽度。布局

并且，若是本身这个td的内容太长，由于table自适应的问题，又会影响其余正常行的宽度。spa

3，解决

由于table布局中，标签都是固定的，table>tbody>tr>td，在td中才能够写其余的标签，code

因此在该例中，能够直接设置 <td colSpan="6"> ，占满整行，在写其余的div，同时也不会影响到其余行。cdn

<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>
复制代码