How to create a table with fixed layout?

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

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).

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

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.