Why is browser showing td's larger than my specified width property?

Question

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

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;
}

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; }

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?

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; } 

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

Anyone have any clues? Thank you.

---

Edit: 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;
}

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

Answer 1

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

Answer 2

Your definition is for all TDs

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

You have to repeat the affected element in the enumeration

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