ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案

时间:2023-03-08 16:12:35
ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案
 <!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.title {background-color:#ccc;width: 150px}
</style>
</head>
<body>
<table style='width:600px'>
<tr>
<td class='title'>哈哈</td>
<td>aa</td>
<td class='title'>大都市</td>
<td>bb</td>
</tr>
<tr>
<td class='title'>adad</td>
<td colspan='3'>alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉</td>
</tr>
</table>
</body>
</html>

此种情况下 在ie7、ie8下 第一行的 3列会被明显撑大,并未能按样式宽度(width: 150px) 显示

解决方案:

1、写死每列宽度

2、把 width:150px 修改成 width:20%  用百分比