css 表格td内的div如何自动高度100%？

作者站长头像
站长
· 阅读数 11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<table border="1">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>
      <div>内容1</div>
    </td>
    <td>
      <div style="height: 100px">内容2</div>
    </td>
    <td>内容3</td>
  </tr>
</table>
</body>
</html>

目标是让内容1所在的div高度能够占满td的高度，单纯height: 100%无效

目前试了这两种方法：https://www.jianshu.com/p/07d...https://segmentfault.com/q/10...

有没有啥更好的方案，这两种尤其是第一种都有点反直觉

或者讲讲为啥单纯height: 100%无效，是因为td是display: table-cell的原因吗？

回复
1个回答
avatar
test
2024-07-11

想要 div 里面的元素上下两边对齐？还是怎么说？边框的话其实可以直接给 td 元素设置的。如果单纯的上下对齐或者居中对齐tabel-cell自生就是支持的。

给 td 元素内的 div 设置 height:100% 无效的原因其实因为 td 是没有高度的，你给 td 设置一个高度就可以了。但是不能单纯给 tr 设置 height:100%，你还得给 table 设置一个高度才行。比如说这样：answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容