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.

try [**fiddle**](http://jsfiddle.net/ksB2K/), this might help you — Amit, Mar 15 '13 at 06:52
Thank you for your suggestion. I will delete my answer after I'm removed from ban. — Bhojendra Rauniyar, Mar 15 '13 at 11:04

score 3 · Accepted Answer · answered Mar 15 '13 at 06:37

3

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

answered Mar 15 '13 at 06:37

Sowmya

26,684
21
96
136

+1 Yes this is working. Is there any way to fix it if I don't know the width and height of the td's? (In real project, I just stretched the table by giving `width:100%; height:100%` and nothing more) – Mr_Green Mar 15 '13 at 06:45
atleast height should be known right?? otherwise why do u even want to stop the content from flowing – Sowmya Mar 15 '13 at 06:47

score 0 · Answer 2 · answered Mar 15 '13 at 07:01

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.

Fix the width and height of the table td

2 Answers2

Linked