table中的td内部的元素不能与td等高的问题

最新推荐文章于 2024-08-11 09:22:22 发布

Vivqst

最新推荐文章于 2024-08-11 09:22:22 发布

阅读量876

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/qiansitong/article/details/133128400

版权

解决该问题的办法:

td标签内部的元素使用table布局，但是需要注意的是td必须设置高度，高度为任意值都可以，虽然设置了高度，但是td依然会被内部内容的高度撑开

<template>
	<table>
		<tr>
			<td>
				<div class="inner-table">
					<div class="inner-box"></div>
				</div>	
			</td>
		</tr>
	</table>
</template>

<style>
	td {
		height: 20px;   // 这里的高度必须设置
	}
	.inner-table {
		display: table;
		width: 100%;
		height: 100%;
		.inner-box {
			display: table-cell;
		}
	}
</style>