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

【问题标题】：Why is browser showing td's larger than my specified width property?为什么浏览器显示的 td 大于我指定的宽度属性？
【发布时间】：2012-08-06 13:42:00
【问题描述】：

td 宽度为 162px，即使 style="width:25px" 用于 td 和 th

我已经把它放在我的 css 文件中了

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

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

它不起作用。最后一个应该使用 class="narrow" 的表格，并将其所有后代 th 和 td 元素设为 50px 宽。并且 chrome 显示 Matched CSS Rules：

.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

【解决方案1】：

在表格样式上设置table-layout: fixed;。否则表格布局松散，width 被视为更像min-width。

【讨论】：

嗯，我看到你得到了三票，但这对我不起作用。表格布局：固定；显示在浏览器中。对单元格宽度没有影响。
单元格的内容是否比所需的宽度更宽，并且没有中断的可能？也许在单元格上尝试word-break: break-all 或overflow: hidden。
啊，是的，谢谢。我在禁用的表单字段中显示值。我猜他们在 Chrome 中的默认大小是 155px。我为他们在我的 css 文件中添加了另一种样式，现在它终于可以使用了！ .hw3p3 输入{宽度：80px; }

【解决方案2】：

您的定义适用于所有 TD

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

你必须在枚举中重复受影响的元素

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

【讨论】：