table设置宽度100%不生效，把页面撑开的解决方法

德顺

发布于 2020-04-22 17:44:31

6.4K0

发布于 2020-04-22 17:44:31

今天改了一个老旧的项目，还是用?table?布局的，遇到了一个有趣的问题。

table?设置了宽度 100% ，但是页面缩小到一定程度后，table?就不再变窄，导致显示不全。

table{
??width:?100%;
}

我以为是?display: block;?的问题，因为之前遇到过一个问题：table表格的td设置百分比宽度不管用的原因及解决方法

改成?table?布局：

table{
??display:?table;
??width:?100%;
}

但还是没有用，找了半天终于发现问题所在：之前给?input?标签设置了?size="60" ，会把?table 撑开，导致宽度出现问题。

<input?type="text"?size="60"?name="title"?/>

textarea?标签的?cols="20"?可能也会导致这个问题。

<textarea?rows="8"?cols="20"?name="content"></textarea>

解决办法：

就是去掉这种属性，用?css?重新给他们设置宽度：

<input?type="text"?name="title"?/>
<textarea?rows="8"?name="content"></textarea>

CSS：

input,textarea{
??width:?60%;
}

这样就能解决?table?设置宽度不起效的问题了。

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度