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.
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;
}
My problem was somewhat different. I was only giving width:100%
and height:100%
to the table
tag. ie, 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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.