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

Question

容器中有一个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?

Answer 1

height: inherit;