如何让 CSS 中表格单元格（td）内的 div 自动高度 100%？

有志者，事竟成！如果你在学习文章，那么本文《如何让 CSS 中表格单元格（td）内的 div 自动高度 100%？ 》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

css 中表格单元格（td）内的 div 如何自动高度 100%？

在 html 表格中，td 单元格会随着其内容自动调整高度。但在某些情况下，td 内部的 div 无法自动占据 td 的整个高度。

无效的 height: 100% 原因

原因在于 td 本身没有固定的高度，因此无法为其子元素（div）提供百分比高度。

解决方案

1. 为 table 和 tr 设置高度：

   table {
     height: 100vh;
   }
   
   tr {
     height: 100%;
   }

2. 垂直对齐 div：
   如果只需要 div 在 td 中垂直对齐，而不是占据整个高度，可以使用 vertical-align：

   td {
     vertical-align: middle;
   }

3. 浮动 div：
   另一种方法是将 div 设置为浮动：

   div {
     float: left;
   }

4. flexbox：
   还可以使用 flexbox 布局来实现：

   td {
     display: flex;
     flex-direction: column;
     height: 100%;
   }

以上方法都可以实现 div 占据 td 的整个高度或垂直对齐。选择哪种方法取决于实际需求和布局。

好了，本文到此结束，带大家了解了《如何让 CSS 中表格单元格（td）内的 div 自动高度 100%？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！