Fix the width and height of the table td

Question

In my project, I am trying to fix the width and height of td's by doing the following:

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

Here is the fiddle

But as you can see in the fiddle, the td is increasing in height if the content in it is increasing.

Anyway to fix it?

Please give a solution which is cross-browser.

If there is a fix available in extjs then that could also help me.

PS: I know using div's it can be achieved easily but now I can't change it.

Answer 1

Wrap your content with 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; 
}

DEMO

Answer 2

My problem was somewhat different. I was only giving width:100% and height:100% to the table tag. i.e, no fixed td's.

I solved this by adding div's inside each td tag and giving them fixed dimensions.

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

Here is the Working Fiddle

Thanks to @Sowmya to give this idea. :)

PS: I am posting this as an answer so that it could help others in future.