为什么浏览器显示td大于我指定的width属性? [英] Why is browser showing td's larger than my specified width property?

问题描述

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

td width is 162px even though style="width:25px" for td and th

我已经将它放在我的css文件中

I've put this in my css file

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

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

它不起作用.最后一个应该使用class ="narrow"制作一张表，并将其所有后代th和td元素的宽度设置为50px.chrome显示匹配的CSS规则:

It doesn't work. The last one there is supposed to take a table with class="narrow" and make all its descendent th and td elements 50px wide. And chrome shows Matched CSS Rules:

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

那么chrome正在阅读并忽略了它?还是CSS只是白痴?还是我为什么CSS不能像普通的编程语言那样做呢?

So chrome is reading it and ignoring it? Or CSS is just idiotic? Or I am? Why can't CSS just do what you tell it, like a normal programming language?

因此，我尝试将style ="width:25px"放在第1列td和th标签中，但仍然无法正常工作.Chrome显示:

SO, I tried putting style="width:25px" right in the 1st column td AND th tags and still, doesn't work. Chrome shows:

element.style { width:25px; } 

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

but it won't tell me why the hell it's displaying it at 162px.

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

Anyone have any clues? Thank you.

Kolink给了我所需的线索.标签内的表单文本字段会导致较大的最小宽度.我添加了此样式以缩小表格:

Kolink gave me the clue I needed. Form text fields inside the tags were causing a large minimum width. I added this style to shrink the table:

.narrow input{
  width:80px;
}

它减小了class ="narrow"表中所有输入的宽度，因此减小了表的宽度.

It reduced the width of all the inputs inside the class="narrow" table and hence reduced the width of the table.

推荐答案

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

Set table-layout: fixed; on the table's styles. Otherwise table layout is loose and width is treated more like min-width.

这篇关于为什么浏览器显示td大于我指定的width属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！