一个table，TD的padding为4px，里面有一个DIV，width设为100%，可是DIV却超出了TD的边界。
我知道将DIV的box-sizing设置为border-box可以解决，但是一旦这样设置了之后引起很多问题，我不想这样设置，能解决问题吗？测试HTML页面：<!DOCTY...
我知道将DIV的box-sizing设置为border-box可以解决，但是一旦这样设置了之后引起很多问题，我不想这样设置，能解决问题吗？
测试HTML页面：
<!DOCTYPE>
<html>
<head>
<style>
TD{padding:2px}
</style>
</head>
<body>
<table width=400px border=1 style="border-collapse:collapse;">
<tr>
<td>xxxxxx</td>
<td><div style="border:1px solid red;width:100%">I am DIV</div></td>
</tr>
<tr>
<td>xxxxxx</td>
<td><input value="thie is input" type=text style="width:100%;border:1px solid blue;"></td>
</tr>
</table>
</body>
</html>
红色框是DIV，蓝色框是一个INPUT。TD的padding设置为2px，可以看到DIV的左边是有2px的间距的，但是右边就仅仅连住了TD的边框；
至于蓝色的INPUT就更夸张，超出了TD的边界。 展开
测试HTML页面：
<!DOCTYPE>
<html>
<head>
<style>
TD{padding:2px}
</style>
</head>
<body>
<table width=400px border=1 style="border-collapse:collapse;">
<tr>
<td>xxxxxx</td>
<td><div style="border:1px solid red;width:100%">I am DIV</div></td>
</tr>
<tr>
<td>xxxxxx</td>
<td><input value="thie is input" type=text style="width:100%;border:1px solid blue;"></td>
</tr>
</table>
</body>
</html>
红色框是DIV，蓝色框是一个INPUT。TD的padding设置为2px，可以看到DIV的左边是有2px的间距的，但是右边就仅仅连住了TD的边框；
至于蓝色的INPUT就更夸张，超出了TD的边界。 展开
2个回答
展开全部
你的总宽度已经超过表格的宽度了，当然会超出去。
你先将input和div的CSS样式重设：div,input{padding:0;margin:0}
然后将里面的宽度值设为一个可操作的值如：
<td><div style="border:1px solid red;width:396px;">I am DIV</div></td>
<td><input value="thie is input" type=text style="width:396px;border:1px solid blue;"></td>
这个宽度你自己去调整，我不知道你要多宽。
为了以防万一，你还可以在你的td样式中加入：td{overflow:hidden;}
你先将input和div的CSS样式重设：div,input{padding:0;margin:0}
然后将里面的宽度值设为一个可操作的值如：
<td><div style="border:1px solid red;width:396px;">I am DIV</div></td>
<td><input value="thie is input" type=text style="width:396px;border:1px solid blue;"></td>
这个宽度你自己去调整，我不知道你要多宽。
为了以防万一，你还可以在你的td样式中加入：td{overflow:hidden;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
