Display HTML element under specific column of a table

Question

I have an HTML table, the table has items in it with one of the columns being revenue. I'm trying to display the total revenue under the revenue column of the table. I want the total revenue to be a separate element. How can I guarantee it will always appear directly under that specific column?

My code for the table:

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

I'm trying to display "Gross Revenue: some number" directly below the gross_revenue column. So far I have been able to position that div where I want it using hard coded pixel values in CSS but I can't do that as the table size is dynamic.

How do I dynamically place it where I want?

Answer 1

Why not just make it part of the table? Something like this for example:

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