¿Por qué el navegador muestra td es más grande que mi propiedad de ancho especificado?

Question

td width es 162px a pesar de que style = "width: 25px" para TD y TH

He puesto esto en mi archivo css

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

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

No funciona. El último se supone que debe tomar una tabla con class = "narrow" y hacer que todos sus elementos descendientes th y td sean de 50px de ancho. Y Chrome muestra las reglas CSS coincidentes:

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

So chrome está leyéndola y haciendo caso omiso de ella? O CSS es simplemente idiota? ¿O lo soy? ¿Por qué CSS no puede hacer lo que le dices, como un lenguaje de programación normal?

SO, traté de poner style = "width: 25px" en la primera columna td AND th tags y aún así, no funciona. Chrome muestra:

element.style { width:25px; } 

pero no me dirá por qué demonios lo está mostrando en 162px.

¿Alguien tiene alguna pista? Gracias.

---

Editar: Kolink me dio la pista que necesitaba. Los campos de texto de formulario dentro de las etiquetas causaban un ancho mínimo grande. Añadí este estilo para reducir el tamaño de la tabla:

.narrow input{ 
    width:80px; 
} 

Se reduce el ancho de todas las entradas dentro de la clase = mesa "estrecho" y por lo tanto reduce el ancho de la mesa.

Answer 1

Establezca en los estilos de la tabla. De lo contrario, la disposición de la mesa es suelta y width se trata más como min-width.

Answer 2

Su definición es para todos anotaciones

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

Hay que repetir el elemento afectado en la enumeración

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