如何让td内容高度自适应，与tr同高

rokok123 2019-04-15 05:35:57

如题。
当tr内两个td高度不同，高的一个会把tr撑开，另一个td内容的高度仍为较小的高度，目前有有一个需求想要让td内的内容(假设其中就是一个有背景色的div)与tr同高。

目前尝试过td以及内部div都设置成100%height,取消居中

...全文

3475 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

dnpao 2019-04-22

打赏
举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

	<style>
		table td{
			height: 100px;/*这里定义一个实高*/
			vertical-align: top
		}
		table td div{
			height: 100%;
		}
	</style>
<body>
	<table width="800" border="1" cellspacing="1" cellpadding="1">
    <tbody>
        <tr>
            <td><div>测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下测试一下</div></td>   
            <td><div style="background: #f60">222222</div></td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

</body>
</html>

rokok123 2019-04-17

打赏
举报

感谢解答~~！

rokok123 2019-04-17

打赏
举报

谷歌一会我单独测试一下可能我的组件影响了他

天际的海浪 2019-04-16

打赏
举报

又测试了下，ie10-不行

天际的海浪 2019-04-16

打赏
举报

你用的什么浏览器我在ie11和谷歌浏览器中测试都可以啊

rokok123 2019-04-16

打赏
举报

测试了一下不行啊

天际的海浪 2019-04-15

打赏
举报


<table>
	<tr>
		<td>
			aaaaaaaaaa<br />
			aaaaaaaaaa<br />
			aaaaaaaaaa<br />
			aaaaaaaaaa<br />
		</td>
		<td style="width: 200px; height: 0px;">
			<div style="background-color: #f00; width: 100%; height: 100%;"></div>
		</td>
	</tr>
</table>