resize table height automatically based on image height?

Question

i have been pulling my hair out over this and cant figure it out for days, would REALLY appreciate some help :(

I am using Drupal (and Views) to display a page of images. The Images are laid out using a Grid format. (I am willing to change it from Grid to another format if it will help achieve what i need easier).

What I have is 6 images going across and each image has a set width of 150px, the height of the image is set automatically.

The effect i want to achieve is to have the images sit ON TOP of each other, currently the height of the table the images sit on is all the same and there is a gap under each image, i want the images to site exactly under each other with just maybe 1px apart, similar to how they do it on Tumblr.

The code of how the table and images is printed is below, can someone help me? pleaseeee. From my search i THINK that im unable to do this using Tables. is that correct? If so then how would i do it so that i can keep a similar grid effect so images sit 6 next to each other on each row, and then fit nicely on top of each other ?

Thank you so much

    <table id="container" class="views-view-grid cols-6">

      <tbody>
              <tr class="block">
                      <td class="col-1 col-first">

      <div class="views-field views-field-field-image-pin">        
<div class="field-content ptpageimg"><div data-edit-id="node/3643/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">

    <a href="/members/ptarticle/woolie-003-0">
<img class="pthover" src="/files/styles/150x200/public/images/pinpage/760_w2.jpg?itok=_ux-EGvz" width="150" height="200" alt="" /></a>
    <a href="/ptarticle/woolie-003-0" target="_self">
    <p class="pttext">Woolie 003
    </p>
    </a>
    </div></div></div></div>  </div>          </td>

                      <td class="col-2">

      <div class="views-field views-field-field-image-pin">        
<div class="field-content ptpageimg"><div data-edit-id="node/3642/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">
    <a href="/members/ptarticle/085"><img class="pthover" src="/default/files/styles/150x200/public/images/pinpage/tumblr_mohhz9Ce001sor33mo1_1280.jpg?itok=4wFQzr_h" width="150" height="200" alt="" /></a>
    <a href="/ptarticle/085" target="_self">
    <p class="pttext">085
    </p>
    </a>
    </div></div></div></div>  
</div>          
</td>

Answer 1

As answered in comments:

Aside from a plugin like isotope.js, elements sitting next to each other will go under no matter how high your row is. Unless using lots of floats and/or absolute positioning, this will happen. By default, a is meant to go under its preceding no matter the height. It's a 's nature.