Отобразить элемент HTML под указанным столбцом таблицы c

Question

У меня есть таблица HTML, в таблице есть элементы с одним из столбцов, представляющих доход. Я пытаюсь отобразить общий доход в столбце доходов таблицы. Я хочу, чтобы общий доход был отдельным элементом. Как я могу гарантировать, что он всегда будет отображаться непосредственно под указанным c столбцом?

Мой код для таблицы:

<section id="itemDetails" class="flexContainer rowFlow">
      <table border="1" frame="box" rules="all" class="items">

        <tr>
          <th>Item Name</th><th>Quantity Sold</th><th>Product Class Name</th>
          <th>Price</th><th>Discount Amount</th><th>Gross Revenue</th>
        </tr>
        <tr th:each="item : ${queryMap.get('2) Check Items')}">
          <td th:text="${item.get('menu_item_name')}"></td>
          <td th:text="${item.get('items_sold')}"></td>
          <td th:text="${item.get('product_class_name')}"></td>
          <td th:text="${item.get('price')}"></td>
          <td th:text="${item.get('discount_amount')}"></td>
          <td th:text="${item.get('gross_revenue')}"></td>
        </tr>

      </table>
      <div>Gross Revenue: some number</div>
    </section>

Я пытаюсь отобразить «Валовой доход: некоторое число "прямо под столбцом gross_revenue. До сих пор мне удавалось расположить этот div там, где я хочу, используя жестко запрограммированные значения пикселей в CSS, но я не могу сделать это, поскольку размер таблицы является динамическим c.

Как мне динамически Поместите это где я хочу?

Answer 1

Почему бы просто не сделать это частью стола? Примерно так, например:

<table border="1" frame="box" rules="all" class="items">
  <tr>
    <th>Item Name</th>
    <th>Quantity Sold</th>
    <th>Product Class Name</th>
    <th>Price</th>
    <th>Discount Amount</th>
    <th>Gross Revenue</th>
  </tr>

  <tr th:each="item : ${queryMap.get('2) Check Items')}">
    <td th:text="${item.get('menu_item_name')}"></td>
    <td th:text="${item.get('items_sold')}"></td>
    <td th:text="${item.get('product_class_name')}"></td>
    <td th:text="${item.get('price')}"></td>
    <td th:text="${item.get('discount_amount')}"></td>
    <td th:text="${item.get('gross_revenue')}"></td>
  </tr>

  <tr>
    <td colspan="5"></td>
    <td>Gross Revenue: some number</td>
  </tr>
</table>

Answer 2

См. Пример ниже

jQuery(document).ready(function(){
  var gross_cell_width = 0;
  var gross_cell_left = 0;
  var width = 0;
  var left = 0;
  jQuery('.gross_data').each(function(){
    var width = jQuery(this).width();
    var left = jQuery(this).offset().left;
    //debugger;
    gross_cell_left = left;
    if(gross_cell_width < width){
      gross_cell_width = width;
    }
    else{
      gross_cell_width = width;
    }
    /** YOU CAN REMOVE THIS IF/ELSE CHECK, IF TABLE POSITION OR CONTENTS OR CHANGED USING ANY EXTERNAL CSS **/
    console.log('Width:'+ width + 'Left: '+ left);
  });
  jQuery("#gross_no").css('width', gross_cell_width);
  jQuery("#gross_no").css('left', gross_cell_left);
  
});

#gross_no{
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<section id="itemDetails" class="flexContainer rowFlow">
      <table border="1" frame="box" rules="all" class="items">

        <tr>
          <th>Item Name</th><th>Quantity Sold</th><th>Product Class Name</th>
          <th>Price</th><th>Discount Amount</th><th>Gross Revenue</th>
        </tr>
        <tr th:each="item : ${queryMap.get('2) Check Items')}">
          <td th:text="${item.get('menu_item_name')}">0</td>
          <td th:text="${item.get('items_sold')}">1</td>
          <td th:text="${item.get('product_class_name')}">2</td>
          <td th:text="${item.get('price')}">3</td>
          <td th:text="${item.get('discount_amount')}">4</td>
          <td class="gross_data" th:text="${item.get('gross_revenue')}">5</td>
        </tr>
        <tr th:each="item : ${queryMap.get('2) Check Items')}">
          <td th:text="${item.get('menu_item_name')}">0</td>
          <td th:text="${item.get('items_sold')}">1</td>
          <td th:text="${item.get('product_class_name')}">2</td>
          <td th:text="${item.get('price')}">3</td>
          <td th:text="${item.get('discount_amount')}">4</td>
          <td class="gross_data" th:text="${item.get('gross_revenue')}">SomeLongLongData</td>
        </tr>

      </table>
      <div id="gross_no">Gross Revenue: some number</div>
    </section>

В вышеприведенном примере ширина и левая позиция div#gross_no устанавливаются с помощью jQuery.