标签存档: 滚动条

表格出现纵向滚动条时在IE6、7下截断最后一个td内容的解决方案

近期在修改公司搜索页面的dtd时遇到 当div内的table出现纵向滚动条时,在ie6和ie7下 会把最后一个td的内容覆盖掉一部分,我当时的第一个解决办法是给ie6、7写hack 单独给table下了width:97%;但结果很不满意,后来还是我们经验丰富的part长给帮忙解决的,他在ie6、7下使用了 table-layout:fixed 和width:auto;  显示效果和其他浏览器一致,问题也解决了,但遗憾的是还是没有脱离hack ,哪位大侠有更好的解决方案也请留言指教。

下面是代码示例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table纵向滚动条</title>
</head>
<body>
<div style="width:500px;height:200px;overflow:auto;overflow-x:hidden;border:1px solid #333;">
<!-- 在ie6、ie7 下使用table-layout:fixed和*width:auto可解决当div内表格出现纵向滚动条时截断最后一个td内容的bug  -->
	<table  border="1" style="table-layout:fixed; width:100%; *width:auto">
		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>		<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
				<tr>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		<td align="center">21222</td>
		</tr>
	</table>
</div>
</body>
</html>