css – 为什么浏览器显示td大于我指定的width属性?

td宽度为162px,即使td和th的style =“width:25px”

我把它放在我的css文件

table,td,th {
    border: 1px solid black;
}
table {
    border-collapse:collapse;
}

table.narrow th,td {
    width:50px;
}

它不工作最后一个应该采用class =“narrow”的表,并使其所有后代th和td元素宽50像素。而Chrome显示匹配的CSS规则:

.narrow th,td { width: 50px; }

所以chrome正在读它并忽略它?或CSS只是愚蠢的?还是我?为什么CSS不能做你所说的,像一般的编程语言?

所以我试着把style =“width:25px”放在第一列td AND th标签中,仍然不起作用。 Chrome显示

element.style { width:25px; }

但是它不会告诉我为什么它在162px显示它。

任何人都有任何线索?
谢谢。

编辑:Kolink给了我需要的线索。标签内的表单文本字段导致最小宽度的大小。我添加了这个样式缩小表:

.narrow input{
  width:80px;
}

它减少了class =“narrow”表中所有输入的宽度,从而减小了表的宽度。

解决方法

设置表格布局:固定;在桌子上的风格。否则表格布局松散,宽度被视为更小的宽度。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效