Та же ширина и высота для HTML таблицы с использованием 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>

Я хочу создать квадратный макет, как показано ниже, для отображения некоторых изображений.

Мой 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

Вот ваш 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>

Answer 2

Если вы используете элемент псевдо и задаете ему 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>