使用jQuery与HTML表格的宽度和高度相同

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> 

我想创建一个如下所示的正方形布局以显示一些图像。

我的HTML如下：

    <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>

在这种情况下，我无法为表格单元格设置确切的宽度和高度。 td平均宽度是可变的。

所以在这里我想检测该可变宽度并使用jquery将其设置为高度。

我这样尝试过，但是对我不起作用。

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

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

谁能帮我解决这个问题。 谢谢。

Answer 1

如果您使用伪元素并将其100％ padding-top ，它将是一个正方形：

 .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

这是您的jquery检测到可变宽度并在屏幕调整大小时将其设置为height

 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>