Search code examples
htmlcsshtml-tablealignment

How to align these tables in different Divs

Consider the following snap on my site.

enter image description here

The area in red is a table that's being rendered dynamically and is in a separate div. The bottom 3 rows are in a different tables in a different div which is static. As these two are basically different tables, the check boxes don't align themselves. These divs are part of a liquid layout and are in the left hand column. Is there a way to align them without fixing the table, row and column widths? Or maybe fool those two tables to believe that they are actually one and align them?

Here is the structure

<div id='dynamic_in_red_border'>
    <table id="one">
    </table>
</div>
<div id="bottom">
    <table id="static">
    </table>
</div>

Hope my question is clear.

PS: the red box is just to make my point, its not there on the actual UI

Solution

  • You can dynamically insert rows using jQuery or pure JS. I'll do jQuery for now:

    HTML:

    <table id="foo">
  <tr><td>foo</td></tr>
</table>

    JavaScript (with jQuery):

    var td = $('<td>').html('bar');
var tr = $('<tr>').append(td);

$('table#foo').append(tr);