Same width and height to html table using jquery

Question

 .table { width: 100%; height: 100%; } .table td { background: red; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery-content"> <table class="table" id="gallery"> <tr> <td> <div> 1 </div> </td> <td> <div> 2 </div> </td> <td> <div> 3 </div> </td> </tr> <tr> <td> <div> 4 </div> </td> <td> <div> 5 </div> </td> <td> <div> 6 </div> </td> </tr> <tr> <td> <div> 7 </div> </td> <td> <div> 8 </div> </td> <td> <div> 9 </div> </td> </tr> </table> </div> 

I want to create a square layout as below to display some images.

My HTML for this is as below:

    <div class="gallery-content">
      <table class="table" id="gallery">
        <tr>
          <td>
            <div>
              <img src="../myimage.jpg">
            </div>
          </td>                  
          <td>
            <div>
              <img src="../myimage.jpg">
            </div>
          </td>                  
          <td>
            <div>
              <img src="../myimage.jpg">
            </div>
          </td>
        </tr>                    
        <tr>....</tr>                    
        <tr>....</tr>                
      </table>
    </div>

In this situation, I can not set exact width and height for table cells. That mean width of the td is variable.

So here I want to detect that variable width and set it to height using jquery.

I tried it like this, But it doesn't work for me.

function windowReszie(){
  var size =$("td").width();
  $("td").height(size);
}

if($('#gallery').length){
  windowReszie()
}

Can anybody help me figure this out. Thank you.

Answer 1

If you use a psuedo element and give it 100% padding-top it will be a square:

 .table { width: 100%; height: 100%; } .table td { background: red; color: #fff; } .table td:before{ content: ""; display: block; padding-top: 100%; } 

 <div class="gallery-content"> <table class="table" id="gallery"> <tr> <td> <div> 1 </div> </td> <td> <div> 2 </div> </td> <td> <div> 3 </div> </td> </tr> <tr> <td> <div> 4 </div> </td> <td> <div> 5 </div> </td> <td> <div> 6 </div> </td> </tr> <tr> <td> <div> 7 </div> </td> <td> <div> 8 </div> </td> <td> <div> 9 </div> </td> </tr> </table> </div> 

Answer 2

Here is your jquery detect that variable width and set it to height when screen resize also

 function windowResize(){ var size =$("td").width(); $("td").height(size); } if($('#gallery').length){ windowResize(); } $(window).resize(function(){ windowResize(); }); 

 .table { width: 100%; height: 100%; } .table td { background: red; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery-content"> <table class="table" id="gallery"> <tr> <td> <div> 1 </div> </td> <td> <div> 2 </div> </td> <td> <div> 3 </div> </td> </tr> <tr> <td> <div> 4 </div> </td> <td> <div> 5 </div> </td> <td> <div> 6 </div> </td> </tr> <tr> <td> <div> 7 </div> </td> <td> <div> 8 </div> </td> <td> <div> 9 </div> </td> </tr> </table> </div>