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

user_tYDk6iCh
  • 79

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

回复
阅读 1.1k
1 个回答

height: inherit;

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏