为什么table中的td设置height:"100%"无效?

user_tYDk6iCh
  • 69

容器中有一个table,我希望这个table能够始终自适应撑满容器,代码如下:

    < div style = {{ height: "300px" }}>
        <table style={{ height: "100%" }}>
            <thead style={{ height: "20%" }}>
                <tr>
                    <th>张三</th>
                    <th>李四</th>
                </tr>
            </thead>
            <tbody style={{ height: "30%" }}>
                <tr style={{ height: "50%" }}>
                    <td style={{ height: "100%" }}>
                        <div style={{ height: "100%" }}></div>
                    </td>
                    <td style={{ height: "100%" }}>
                        <div style={{ height: "100%" }}></div>
                    </td>
                </tr>
                <tr style={{ height: "50%" }}>
                    <td style={{ height: "100%" }}>
                        <div style={{ height: "100%" }}></div>
                    </td>
                    <td style={{ height: "100%" }}>
                        <div style={{ height: "100%" }}></div>
                    </td>
                </tr>
            </tbody>
        </table>
</div>

问题:在设置tr的高度的情况下,设置td的高度,但是无论设置百分比还是设置固定高度,都会被内部的div撑开,请问有没有什么办法能够解决这个问题呢,让td内部的div高度始终为td高度的100%,并且不会撑开td?

回复
阅读 923
宣传栏