解决IE浏览器下flex对table不起作用的问题

最新推荐文章于 2022-11-17 17:49:58 发布

佛佛ง

最新推荐文章于 2022-11-17 17:49:58 发布

阅读量800

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/LzzMandy/article/details/97798003

版权

CSS学习笔记专栏收录该内容

26 篇文章 2 订阅

订阅专栏

问题描述：

如果对tablebox1使用flex布局，下面的两个table宽度均设置成100%，根据flex的特性，当宽度达不到要求时，会自动缩放，但在IE浏览器下不起作用，table会溢出，如下图所示：

解决方案：

对每个table包一个div，这个div 的宽度为100%即可，效果如上图的第二行表格。

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="scripts/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
		});
	</script>
	<style type="text/css">
	.tabelbox1,.tabelbox2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		width: 40%;
	}
	.tabelbox1>table:first-child,.tabelbox2>.tabelitem:first-child{
		margin-right: 10px;
	}
	.tabelbox2{
		margin-top: 20px;
	}
	.tabelbox2>.tabelitem,.tabelbox2>.tabelitem>table{
		width: 100%
	}
	.item
	{
		width:100%;
		height: 90%;
		border-collapse:collapse;
	}
	.item tr{
		text-align: center;
	}
	.item th
	{
		background-color:#CCD3DB;
		color:#ffffff;
	}
	.item tr.alt td
	{
		background-color:#ECEEF2;
		color:#000000;
	}
}
</style>
</head>
<body>
	<div class="tabelbox1">
		<table id="item3" class="item">
			<tr>
				<th>姓名</th>
				<th>班级</th>
				<th>住址</th>
				<th>电话</th>
			</tr>
			<tr>
				<td>姓名1</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
			<tr class="alt">
				<td>姓名2</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
			<tr>
				<td>姓名3</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
			<tr class="alt">
				<td>姓名4</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
		</table>
		<table id="item4" class="item">
			<tr>
				<th>姓名</th>
				<th>班级</th>
				<th>住址</th>
				<th>电话</th>
			</tr>
			<tr>
				<td>姓名5</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
			<tr class="alt">
				<td>姓名6</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
			<tr>
				<td>姓名7</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
			<tr class="alt">
				<td>姓名8</td>
				<td>15</td>
				<td>5</td>
				<td>1</td>
			</tr>
		</table>
	</div>
	<div class="tabelbox2">
		<div class="tabelitem">
			<table id="item1" class="item">
				<tr>
					<th>姓名</th>
					<th>班级</th>
					<th>住址</th>
					<th>电话</th>
				</tr>
				<tr>
					<td>姓名1</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
				<tr class="alt">
					<td>姓名2</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
				<tr>
					<td>姓名3</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
				<tr class="alt">
					<td>姓名4</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
			</table>
		</div>
		<div class="tabelitem">
			<table id="item2" class="item">
				<tr>
					<th>姓名</th>
					<th>班级</th>
					<th>住址</th>
					<th>电话</th>
				</tr>
				<tr>
					<td>姓名5</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
				<tr class="alt">
					<td>姓名6</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
				<tr>
					<td>姓名7</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
				<tr class="alt">
					<td>姓名8</td>
					<td>15</td>
					<td>5</td>
					<td>1</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

佛佛ง

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决IE浏览器下flex对table不起作用的问题

问题描述：如果对tablebox1使用flex布局，下面的两个table宽度均设置成100%，根据flex的特性，当宽度达不到要求时，会自动缩放，但在IE浏览器下不起作用，table会溢出，如下图所示：解决方案：对每个table包一个div，这个div 的宽度为100%即可，效果如上图的第二行表格。源码：<!DOCTYPE html PUBLIC "-//W3C//...
复制链接

扫一扫