3

Есть несколько таблиц, первая в роли заголовка для остальных:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-4">
      <table class="table table-head">
        <tr>
          <td>Item 1</td>
        </tr>
        <tr>
          <td>Item 2</td>
        </tr>
        <tr>
          <td>Item 3</td>
        </tr>
      </table>
    </div>

    <div class="col-4">
      <table class="table">
        <tr>
          <td>Lorem ipsum dolor.</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, ex.</td>
        </tr>
        <tr>
          <td>Lorem</td>
        </tr>
      </table>
    </div>

    <div class="col-4">
      <table class="table">
        <tr>
          <td>Lorem ipsum.</td>
        </tr>
        <tr>
          <td>Lorem</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet.</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Вопрос: как не объединяя (с помощью jQuery) выровнять ячейки первой таблицы-заголовка (и всех остальных соответственно) по максимальной высоте остальных? Т.е. так чтобы ячейки всех таблиц были на одном уровне, как это была бы одна таблица?

1 ответ 1

2

$(window).resize(function(){
  // clear old row heights
  $(".col-4 table tr").each(function(){
    $(this).height('');
  });

  // calculate maximum row heights
  var heights = [];
  $(".col-4 table").each(function(){
    $(this).find("tr").each(function(i, el){
      heights[i] = Math.max(heights[i], $(el).height()) || $(el).height();
    });
  });

  // assign row heights
  $(".col-4 table").each(function(){
    $(this).find("tr").each(function(i, el){
      $(el).height(heights[i]);
    });
  });
}).resize();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-4">
      <table class="table table-head">
        <tr>
          <td>Item 1</td>
        </tr>
        <tr>
          <td>Item 2</td>
        </tr>
        <tr>
          <td>Item 3</td>
        </tr>
      </table>
    </div>

    <div class="col-4">
      <table class="table">
        <tr>
          <td>Lorem ipsum dolor.</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, ex.</td>
        </tr>
        <tr>
          <td>Lorem</td>
        </tr>
      </table>
    </div>

    <div class="col-4">
      <table class="table">
        <tr>
          <td>Lorem ipsum.</td>
        </tr>
        <tr>
          <td>Lorem</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet.</td>
        </tr>
      </table>
    </div>
  </div>
</div>

3
  • Спасибо! Вы меня сегодня выручаете 😘 !!!
    – SVE
    8 мар 2020 в 15:57
  • @HamSter Пожалуйста. С восьмым марта!
    – user176262
    8 мар 2020 в 15:59
  • Спасибо! Самый лучший подарок - помощь в решении задачи!)
    – SVE
    8 мар 2020 в 16:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.