How to create a table with fixed layout? - html

Question

Hai ,
I am using a html table for my website layout .
when we press enter in one cell , the cell is resizing.
I used css for fixing the table layout. table layout is not changing .But cell is resizing.
.pageContent table
{
height:100%;
width:100%;
table-layout:fixed;
}
.pageContent table tr td
{
padding:5px 10px 5px 10px;
}
how to prevent this resizing of table cells ?

Answer 1

Your table is re-sizing because you are using proportional widths.
There are many ways you can control this. For example, by setting your or height in pixels:
CSS:
table td {height: 20px;}
Your cells will no longer re-size vertically.

Answer 2

Have you tried adding the following CSS
td { overflow:hidden;white-space:nowrap; }
tr { height:1em; } /* or set an appropriate height and width */
This will hide the overflow in the cells however, but they won't resize.
Your layout might be easier to do with semantically correct HTML, using <div> elements but would need to see the markup.

Answer 3

It's hard to be sure, but you haven't set a size on the td in question, only padding. So the td will be expanding to contain whatever is inside it. In some browsers this might change a wee bit with focus.
Could you try setting an explicit width and height (in ems or pixels) for the td?
.pageContent table tr td
{
padding: 5px 10px 5px 10px;
width:8em;
height:2em;
}
Could you post a bit of your markup, or let us know what the content in the cells is? (And which browsers you're seeing the problem in).