CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
user3733831
user3733831

Reputation: 2926

Same width and height to html table using jquery

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

enter image description here

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.

Upvotes: 0

Views: 267

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

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>

Upvotes: 0

dave
dave

Reputation: 64657

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>

Upvotes: 1

Related Questions