CODEWITHSUNDEEP
htmlcssextjscross-browserextjs4.1
Mr_Green
Mr_Green

Reputation: 41832

Fix the width and height of the table td

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.

Upvotes: 0

Views: 6830

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

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.

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 3

Related Questions