Repara el ancho y la altura de la tabla td

En mi proyecto, estoy tratando de arreglar el ancho y alto de td ‘s haciendo lo siguiente:

 td{ max-width:100px; max-height:100px; width:100px; height:100px; overflow:hidden; word-wrap:break-word; /* CSS3 */ } 

Aquí está el violín

Pero como puede ver en el violín, el td aumenta en altura si el contenido en él aumenta.

¿Alguna manera de arreglarlo?

Por favor, brinde una solución que sea cross-browser .

Si hay una solución disponible en extjs, eso también podría ayudarme.

PD: Sé que usar Div’s se puede lograr fácilmente, pero ahora no puedo cambiarlo.

Envuelve tu contenido con div

 table{width:500px;height:200px;} td{border:1px solid green; width:100px; height:100px;} /* My fix try */ td div{ width:100px; height:100px; overflow:hidden; word-wrap:break-word; } 

MANIFESTACIÓN

Mi problema fue algo diferente. Solo le estaba dando width:100% y height:100% a la etiqueta de la table . es decir, sin td fijo.

Lo resolví añadiendo div dentro de cada etiqueta td y dándoles dimensiones fijas.

 td>div{ /* Giving values less than the td values by assuming */ width:100px; height:100px; overflow:hidden; } 

Aquí está el violín de trabajo

Gracias a @Sowmya para dar esta idea. 🙂

PD: Estoy publicando esto como una respuesta para que pueda ayudar a otros en el futuro .