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

前端之家收集整理的这篇文章主要介绍了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”表中所有输入的宽度,从而减小了表的宽度。

解决方法

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

猜你在找的CSS相关文章