How to create a table with the same dimensions as a previous one

Question

I would want to create a table with the same widths (table and its cells) then a previous one created dynamically

1st

__________________
|_____|___|_______|
|_____|___|_______|
|_____|___|_______|

2nd

__________________
|_____|___|_______|
|_____|___|_______|

What do I need to do to set the second one with the desired widths. (Table 1 widths depends on it's content).

Edit: Finally, I went for the jQuery solution and did it like that:

  $("#mySecondTable tr") // mySecondTable was already generated server side
  .first() // All rows in my second table are similar so I just apply on the first one
  .find("td")
  .width(function(i){ return $("#myFirstTable tr").eq(1).find("td").eq(i).width() })
  // eq(1) fetches the line I want to use as a model since some have different colspans
  .end()

Answer 1

Use Javascript (I'd recommend jQuery) to get the width of each "column" (th/td) from the 1st table, and set the width CSS property to that pixel value on the th and/or tds in the 2nd table.

Answer 2

if it is acceptable in your case use style="table-layout:fixed;" on both the tables to exactly controls the cell width

Answer 3

Since PHP works server side it can't be aware of browser windows dimensions and/or table design. It may check the table cell contents for string lengths and you may estimate and set the width of any cell in your output. But if table one has no width properties you'll probably need to use some javascript on your second table to make them fit the first widths.

Answer 4

'luca' and 'Bears will eat you' gave two good solutions. The only other one I see is to put all the data in one table, rather than two.

Answer 5

If I'm understanding correctly, its seems you should just css the desired width, and then everything will stretch according to the content inserted

Answer 6

The quick and dirty answer: you could make them one table, with the text in between them being a single row with colspan="x", where x is either the number of columns in the table, or the number of columns + 1.

Answer 7

Would it work for you to not actually put them in separate tables, but have both as a part of a single table, separated by a row with a <td colspan="3">? Maybe include a header for the second table in that?

Answer 8

You could accomplish this with jQuery pretty easily:

$("table.foo")
  .clone()
    .find("td")
      .html("")
      .width(function(i){ return $("table.foo td").eq(i).width() })
      .height(function(i){ return $("table.foo td").eq(i).height() })
    .end()
  .appendTo("body");

Online Demo: http://jsbin.com/obuco/3/edit