How do I stop dynamic JavaScript tables from moving other elements around when I add rows to the table?

Question

I have an HTML page that has static tables placed in the page because these never change. I have a main table that houses all the elements to keep everything aligned. This is probably what is causing the problem. I have the main table with 2 tables within it. Each row in the first inner table, called dropDownTable, usually has up to about 10 rows. dropDownTable is in the following format: td1: text; td2: select element; td3: text (this part is dynamically updated). The second table, called showDetails, uses the options from the select element in the rows in dropDownTable to query a database (onchange attribute), get some information and then display each element that is found. The response from the database is up to 150 character strings, usually shorter though.The user then clicks an element in the details that updates the third column in the dropDownTable. I'm not really sure if this is a JavaScript or HTML problem but each time the showDetails table updates, it pushes the bottom of the main table down. There are 2 buttons at the bottom of the main table that move each time the user changes the select in the second column of dropDownTable. It very aesthetically displeasing. Any ideas would be greatly appreciated. I have had this problem before but with other elements.

Answer 1

are you adding more content, thus making the table taller?

I cant quite understand what your problem is exactly, but:

td
{
    vertical-align: top;
}

will keep everything in the top of its cell, rather than centering to the tallest column.

You shouldnt be using tables for layout, tables are for tabular data. have a read of this

if you want to fix the heght of the table, do:

table
{
    height: 400px; /* replace with your heihgt */
}