I have a table and I use Javascript to implement the function that allows the user to add/delete columns of certain row. The content of the new datacell will be the same as that in the one before that. I find that if I just add one column (one datacell to a row), everything is fine. The new datacell has the same content, size, and layout of the the one before it (the one on its left). However, if I add one more, the newly added datacell’s layout is different, and the size of the datacell increases but the layout of the first two datacells don’t change. And the HTML page jumps around. If I delete the third datacell, everything goes back to normal. Looks like two is the limit? But I don’t remember hardcoding anything.
Is there a property I could add to solve this resizing-itself problem? I tried adding the nowrap property to , it solved the page-jumping-around problem but the size of datacells still changes and the layout changes too.
EDIT: It turns out the resizing is because that the cells are out of the browser’s scope so it tries to “compress” them.
I’m not sure, what your point is, exactly, but I think you mean, that your cells resize with the amount of content, but there is the colgroup, where you can set a number of columns and set width, height and so on
<colgroup><col width="200px"><col width="180px"><col width="220px">...</colgroup>Your first three columns every row have 200px,180px and 220px fixed. Every additional column will be resize themselves.
Sorry, my english is not good.
I hope this will help you.