为什么浏览器显示td大于我指定的宽度属性？

Question

即使td和th的style ="width:25px",td宽度也是162px

我把它放在我的css文件中

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

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

它不起作用.最后一个应该采用class ="narrow"的表格,并使其所有后代th和td元素的宽度为50px.Chrome显示了匹配的CSS规则:

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

因此,铬正在阅读并忽视它？或者CSS只是愚蠢的？或者我呢？为什么CSS不能像你说的那样做,就像普通的编程语言一样？

所以,我尝试将style ="width:25px"放在第1列td和th标签中,但仍然不起作用.Chrome显示:

element.style { width:25px; } 

但它不会告诉我为什么它会以162px的速度显示它.

有人有任何线索吗？谢谢.

---

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

.narrow input{
  width:80px;
}

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

Answer 1

设置table-layout: fixed;在桌子上的样式.否则表格布局是松散的,并且width更像是min-width.