由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>
複製代碼