How to create a table with fixed layout?
Hai ,
I am using a html table for my 开发者_如何学Pythonwebsite 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 ?
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.
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.
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).
精彩评论